CSS Animations

All in one: every animation property and value, side by side

What this example compares

Two halves: @keyframes grow alone vs animation: grow ... vs the misspelt animation: grwo ...
Writing the stages: from/to vs 0% 50% 100% vs grouped 0%, 100% vs only to
Duration: animation-name with animation-duration: 1.5s vs 800ms vs 0.8s vs no duration (0s)
Speed curve: animation-timing-function: linear vs ease vs ease-in-out vs ease-out
How many times: animation-iteration-count: 1 vs 3 vs infinite
Which way: animation-direction: normal vs reverse vs alternate
Before and after: animation-delay with animation-fill-mode: none vs forwards vs backwards vs both
Pause: animation-play-state: running vs paused vs paused on :hover
One line or many: the animation shorthand vs five longhands vs animation: pulse 1.6s vs a shorthand with a delay
The five you will build: spinner, pulsing badge, slide, staggered fade-in (:nth-child + animation-delay), typing dots
Transition or animation: transition on :hover and :focus vs an animation that starts itself vs one with three stages
What to animate: transform vs margin-left, scale() vs width
Respect the reader: no rule vs @media (prefers-reduced-motion: reduce) with 0.01ms, !important and scroll-behavior: auto
Everything together: Asha Kumar's profile page from 39.7

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see fourteen panels (scroll inside the result to reach them all). In panel 1 only the middle square grows and shrinks. In panel 2 one square fades in, the badge swells, one square blinks and one turns. In panel 3 the first three squares slide at different speeds (the 800ms and 0.8s squares move together) and the last one does not move. Panel 4 shows four squares on the same trip at different speeds. In panel 5 the first square slides once, the second three times and the third never stops. In panel 6 the first square goes left to right and jumps, the second right to left and jumps, the third glides back and forth. In panel 7 all four wait one second (the last two orange, the first two grey), slide and turn green, and then the first and third jump back to grey on the left while the second and fourth stay green on the right. Panel 8 shows a turning square, a straight frozen one, and one that stops while you hover it. In panel 9 the first two badges pulse together, the third pulses once and the fourth slightly behind. Panel 10 shows a spinner, a pulsing badge, a sliding square, three cards fading up one after another and three typing dots. In panel 11 the first square rises only when you hover it and the button turns green when you click it, while the other two squares move by themselves. In panel 12 the word Asha stays still in the first and third boxes and is pushed in the second and fourth. Panel 13 shows two spinners and three fading cards (if your device asks for reduced motion, the second spinner stands still and the cards appear at once), and panel 14 is Asha Kumar's profile page with its cards fading up one after another. There is no JavaScript, so nothing is printed in the Console.

Quick check: in panel 14, why does hovering a course card change its edge colour but not lift it, and which fill mode fixes that?

The cards use forwards, which keeps holding the last frame of fadeUp, including transform: translateY(0), and a value an animation holds beats the :hover rule. Delete opacity: 0 and use backwards instead: it shows the invisible first frame while each card waits for its delay, and after the run the animation lets go, so the hover lift works. Panel 7 shows all four fill modes side by side.