Jello Vertical is a continuous & looping CSS keyframe animation with 6 keyframe steps (0% → 30% → 40% → 50% → 65% → 100%). It animates transform (scaleY, skewY).
Continuous and looping animations repeat without stopping. Blink, bounce, jello, pulse, shake, vibrate and wobble are used for attention cues, error states, notifications and idle effects.
Animation shorthand
.element {
animation: jello-vertical 1s ease 0s infinite normal forwards;
}@keyframes code
@keyframes jello-vertical {
0% { transform: scaleY(1) skewY(0); }
30% { transform: scaleY(.95) skewY(-10deg); }
40% { transform: scaleY(1.05) skewY(8deg); }
50% { transform: scaleY(.98) skewY(-6deg); }
65% { transform: scaleY(1.02) skewY(4deg); }
100% { transform: scaleY(1) skewY(0); }
}HTML
<div class="element">Animated content</div>Keyframe steps
| Step | Styles |
|---|---|
| 0% | transform: scaleY(1) skewY(0); |
| 30% | transform: scaleY(.95) skewY(-10deg); |
| 40% | transform: scaleY(1.05) skewY(8deg); |
| 50% | transform: scaleY(.98) skewY(-6deg); |
| 65% | transform: scaleY(1.02) skewY(4deg); |
| 100% | transform: scaleY(1) skewY(0); |
Respect reduced motion
@media (prefers-reduced-motion: reduce) {
.element {
animation: none;
}
}More Continuous & Looping animations
Frequently Asked Questions
Copy the @keyframes jello-vertical block and the animation shorthand into your stylesheet, then add the class to any element. The shorthand reads name, duration, timing function, delay, iteration count, direction and fill mode.
Yes. Change the second value in the shorthand, for example 2s for a slower animation, or use the settings above the code to try duration, timing, delay, repeat count, direction and fill mode and copy the updated CSS.
Replace infinite with a number such as 1 or 3 in the shorthand. The animation then plays that many times and stops.
Yes. It only animates transform and opacity, which browsers can hand to the GPU, so it stays smooth even on mobile devices.