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