- for (let i = 0; i < 11; ++i)
div(style={'--num': i}) 😸
View Compiled
div {
position: absolute;
font-size: 24px;
animation-name: move1, move2, move3;
animation-duration: 2s;
animation-timing-function: cubic-bezier(1, 0.333, 0, 0.667);
animation-iteration-count: infinite;
animation-delay: calc(-0.2s * var(--num));
}
@keyframes move1 {
from { transform: translate3d(50px, 100px, 0); }
to { transform: translate3d(69px, -562px, 0); }
}
@keyframes move2 {
to { transform: translate3d(522px, 527px, 0); }
}
@keyframes move3 {
to { transform: translate3d(30px, 50px, 0); }
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.