Belépő animációk
Forgó beúszás
Élő előnézet – az animáció teljes méretben.
Élő előnézet
HTML · CSS · JS
<div class="we-entry-rotate">
<span class="we-entry-label">
WebElements
</span>
<strong>
Elegánsan érkező elem
</strong>
<small>
Finom forgás és lágy felúszás
</small>
</div>
.we-entry-rotate {
width: 100%;
max-width: 440px;
margin: 60px auto;
padding: 38px 40px;
position: relative;
background: #0b1014;
border: 1px solid rgba(142,240,213,.22);
border-radius: 18px;
color: #f2f4f0;
font-family: Arial, sans-serif;
opacity: 0;
transform:
translateY(50px)
rotate(-7deg)
scale(.94);
transform-origin: center bottom;
animation:
weRotateEntry
1.15s
cubic-bezier(.22,1,.36,1)
.1s
forwards;
}
.we-entry-rotate::after {
content: "";
position: absolute;
width: 42px;
height: 42px;
right: 28px;
top: 26px;
border:
1px solid rgba(142,240,213,.22);
border-radius: 50%;
transform: rotate(0deg);
animation:
weRotateDetail
1.15s
ease-out
.1s
forwards;
}
.we-entry-rotate .we-entry-label {
display: block;
margin-bottom: 12px;
color: #8ee8d4;
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
}
.we-entry-rotate strong {
display: block;
margin-bottom: 8px;
font-size: 28px;
font-weight: 400;
}
.we-entry-rotate small {
color: #87939a;
font-size: 13px;
}
@keyframes weRotateEntry {
0% {
opacity: 0;
transform:
translateY(50px)
rotate(-7deg)
scale(.94);
}
65% {
opacity: 1;
transform:
translateY(-5px)
rotate(1deg)
scale(1.01);
}
100% {
opacity: 1;
transform:
translateY(0)
rotate(0)
scale(1);
}
}
@keyframes weRotateDetail {
0% {
opacity: 0;
transform:
rotate(-45deg)
scale(.7);
}
70% {
opacity: 1;
transform:
rotate(8deg)
scale(1.05);
}
100% {
opacity: 1;
transform:
rotate(0)
scale(1);
}
}
Ehhez az animációhoz nincs külön JavaScript.