Belépő animációk
Fényből szétnyíló
Élő előnézet – az animáció teljes méretben.
Élő előnézet
HTML · CSS · JS
<div class="we-entry-split">
<div class="we-split-panel we-split-left"></div>
<div class="we-split-panel we-split-right"></div>
<div class="we-split-content">
<span class="we-entry-label">
WebElements
</span>
<strong>
Kinyíló tartalom
</strong>
<small>
Két fényréteg mögül előtűnő elem
</small>
</div>
</div>
.we-entry-split {
width: 100%;
max-width: 440px;
height: 190px;
margin: 60px auto;
position: relative;
overflow: hidden;
background: #0b1014;
border: 1px solid rgba(142,240,213,.22);
border-radius: 18px;
color: #f2f4f0;
font-family: Arial, sans-serif;
}
.we-split-content {
position: absolute;
inset: 0;
padding: 38px 40px;
opacity: 0;
transform: scale(.94);
animation:
weSplitContent
.8s
cubic-bezier(.22,1,.36,1)
.7s
forwards;
}
.we-split-panel {
position: absolute;
z-index: 3;
top: 0;
width: 51%;
height: 100%;
background:
linear-gradient(
90deg,
#8ee8d4,
rgba(255,255,255,.95),
#8ee8d4
);
box-shadow:
0 0 25px rgba(142,240,213,.5);
}
.we-split-left {
left: 0;
transform-origin: left center;
animation:
weSplitLeft
1.15s
cubic-bezier(.22,1,.36,1)
.1s
forwards;
}
.we-split-right {
right: 0;
transform-origin: right center;
animation:
weSplitRight
1.15s
cubic-bezier(.22,1,.36,1)
.1s
forwards;
}
.we-entry-split .we-entry-label {
display: block;
margin-bottom: 12px;
color: #8ee8d4;
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
}
.we-entry-split strong {
display: block;
margin-bottom: 8px;
font-size: 28px;
font-weight: 400;
}
.we-entry-split small {
color: #87939a;
font-size: 13px;
}
@keyframes weSplitLeft {
0% {
transform:
translateX(0)
scaleX(1);
}
45% {
transform:
translateX(0)
scaleX(1);
}
100% {
transform:
translateX(-100%)
scaleX(1);
}
}
@keyframes weSplitRight {
0% {
transform:
translateX(0)
scaleX(1);
}
45% {
transform:
translateX(0)
scaleX(1);
}
100% {
transform:
translateX(100%)
scaleX(1);
}
}
@keyframes weSplitContent {
0% {
opacity: 0;
transform: scale(.94);
}
60% {
opacity: 1;
transform: scale(1.02);
}
100% {
opacity: 1;
transform: scale(1);
}
}
Ehhez az animációhoz nincs külön JavaScript.