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.

Image for post
Image for post

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.

Note: Easing adds flavor to your animation — by providing a curve describing relative velocity of your animation at a particular spot on the time line.

We’ll cover easing and all other CSS animation properties throughout the remainder of this chapter, based on this simple example.

So How Does It Work?

CSS animation keyframes are specified using the @keyframes directive. A keyframe is simply the element’s state at a single point on animation time line.

CSS animation engine will automatically interpolate between animation keyframes. All you need to do is specify the state of CSS properties at the start and end points of the animation.

Once all of our keyframe locations are set up (which are often specified in percent) all we need to do is set up the defaults for our original element we wish to animate.

Then create a named animation using @keyframes animationName {…} format, that stores all the keyframes. We’ll take a look at that in just a moment!

Finally, create a special class that will define your animation’s duration, direction, repeatability, and easing type… and link it to the same animation name that was used by @keyframes directive. This process is explained visually on the next page.

CSS Animation Properties

animation-name — name of the keyframe specified by @keyframes rule.

animation-duration — duration of the animation in milliseconds.

animation-timing-function — specify easing function.

animation-delay — add delay before animation starts playing.

animation-iteration-count — number of times animation should play.

animation-direction — play forwards, backwards or alternate sequence.

animation-fill-mode — state of the animation when it is not playing.

animation-play-state — specify whether animation is running or is paused. In the following sections we’ll explore each one visually.

In the following sections we’ll explore each one visually.

animation-name

Image for post
Image for post

Animation name must refer to the one specified by @keyframes directive:

Image for post
Image for post

animation-duration

Image for post
Image for post

Figure 2: You can specify duration in seconds or milliseconds, if you need more precision. For example 3000ms is the same as 3s and 1500ms is the same as 1.5s

Image for post
Image for post

Figure 3: It is possible to assign a delay in milliseconds before animation starts playing.

animation-direction

Image for post
Image for post

Figure 4: The values normal, reverse, alternate and alternate-reverse; and their effects.

CSS animation engine will automatically interpolate between frames. An interpolated animation state is simply any state between any two frames. As the color transitions from yellow to teal, it will gradually change over the period of time specified by the animation property (here, as a short-hand).

animation-iteration-count

Image for post
Image for post

Figure 5: Play animation 1 time (default).

Image for post
Image for post

Figure 6: Repeat animation 2 times.

Image for post
Image for post

Figure 7: Repeat animation 3 times.

As you can see, the obvious problem here is that the animation will ”jump” back to the first frame again.

You can use some of the other animation properties to make sure that this jumping doesn’t occur. You can design your animation to loop, or tweak other properties based on particular UI dynamics you’re looking for. This way you can design only ”half” of your animation, and tweak properties to play it forwards or backwards, let’s say on mouse-in and mouse-out events.

animation-timing-function

Image for post
Image for post

Figure 8: animation-timing-function: linear;

Image for post
Image for post

Figure 9: animation-timing-function: ease;

Image for post
Image for post

Figure 10: animation-timing-function: ease-in;

Image for post
Image for post

Figure 11: animation-timing-function: ease-out;

Image for post
Image for post

Figure 12: animation-timing-function: ease-in-out;

Image for post
Image for post

Figure 13: You can create your own cubic Bezier curves.

Image for post
Image for post

Figure 14: Two control points P1 and P2 are passed to cubic-bezier function as arguments. The range of values is between 0.0 and 1.0.

Because easing is determined by an equation, you can supply your own arguments to create unique curves to achieve a particular type of velocity not 198 available by the predefined values. As shown in the charts below, you can recreate the standard set of values using cubic-bezier function:

Image for post
Image for post

Figure 15: If you need slightly different curve for your UI elements, try to play around with the values until you achieve the effect you’re looking for

animation-fill-mode

Possible values:

forwards / Retain styles from the last keyframe (can be affected by animation-direction and animation-iteration-count.)

backwards / Get styles from the first keyframe (can be affected by animation-direction) also retain this style during animation-delay state.

both / Extend animation properties in both directions (forwards and backwards.)

animation-play-state

Possible values:

running / Animation is currently playing.

For example, you can pause animation on mouse hover:

Image for post
Image for post

Figure 16: Set animation state to paused.

Forward & Inverse Kinematics

But, the effect can be simulated by using transform: rotate(degree) and transform-origin property to specify the pivot point between a parent and a child element.

Image for post
Image for post

Figure 17: Rotate around attachment point on root element.

The Root point is the place where the primary element is attached to either another parent element, or an imaginary static point in space. If Element A moves, it must affect Element B, in such way as if they were attached to each other at a Rotation Pivot Point.

This means, calculating all kinds of angles and lengths using trigonometric formulas. We can do this with JavaScript, or by using an existing vector / trigonometry library. But luckily, CSS already provides support for these types of element dynamics via the native transform-origin property

Forward Kinematics is when by moving Element A the movement of Element B is also affected (like a chain reaction) as though they are attached to each other at a shared pivot point.

Inverse Kinematics is the reverse of that: the physical movement of Element B affects Element A provided that it’s attached to some static point or another parent element. If not, the two elements can float in space :) This is a lot like bone joints in an animated character!

Night Stroll

Get More Freemium via Social Networks

Follow me on Instagram for a quick hit of JavaScript.

Get All CSS Properties In One Neat Visual Reference

This CSS book contains all CSS properties with visual diagrams.

The diagrams in this tutorial were influenced directly by the manuscript!

Image for post
Image for post
CSS Visual Dictionary 28% OFF for Medium readers.

All CSS Properties — Visually!

This book contains diagrams describing all CSS properties.

28%OFF for Medium readers.

  • Now also includes a new chapter on CSS Animation.

Written by

Issues. Every webdev has them. Published author of CSS Visual Dictionary https://amzn.to/2JMWQP3 few others…

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