CSS Animations

Motion makes an interface feel alive. Keyframes describe how something changes over time, and the browser does the rest at 60 frames per second.

@keyframes float { … }

1. 1Something to animate

   Add a div with class "ball".

   <div class="ball"></div>

2. 2Style it

   Make it a coloured circle.

3. 3Define keyframes

   Write a float animation that moves it up and back down.

4. 4Play it forever

   Attach the animation to .ball on a loop.