Simple CSS Animation Tutorial

Let’s turn a yellow square box into a teal circle.

Check out my CSS Book on Amazon for complete CSS reference.

Figure 1: Soon as .animateClass is assigned to an element, animation will start playing. The class has a link to animationName. It must match the name specified by @keyframes rule. This animation is set to last 3 seconds or 3000ms as specified.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store