A 5 Minute Guide To CSS Animations

If you are looking to add a splash of design to your existing websites, then CSS animations are a simple and quick way to do so, and they have a few benefits over the traditional use of JavaScript based animations.

For one, and the most important, is that you don't have to worry about math and geometry as the browser will take care of that for you. Many are put off by adding animations because for sure they are not simple. Even just sliding a text paragraph into focus on page load can be a bit tricky in the traditional JavaScript way. You'll have to worry about managing timers and setting coordinates yourself with plenty more room for error.

Whereas with CSS animations, it is just a few style rules away in order to get very smooth and optimized 

Why you should be using animations

• They are simple to implement
• The browser handles performance issues so that you don't have to
• Externalizes 'design/style' related functionality to stylesheets
• Wide browser support
• Most mobile browsers support animations

When to use an Animation

The first thing to note, is that animations are somewhat similar to CSS transitions as both of these can make a DOM element change properties based on some time interval. So from the very beginning it is important to pick a side and stick with it, because it will take you a bit longer to set up an animation than a transition, so you should be sure that you're not setting up animations where transitions would do the job just fine.

The following 2 buttons both show the exact same effect. The first however, uses a transition and the second uses an animation. Note how much more work goes into making the 2nd element animate.

.btn-transition
{
    background-color:#1caff6;
    color: white;
    border-radius: 8px;
    width: 100px;
    transition: 1s background-color;
    margin:0 auto;
    padding: 10px;
}

.btn-transition:hover
{
    background-color: #0c394e;
}

.btn-animation
{
    background-color:#1caff6;
    color: white;
    border-radius: 8px;
    width: 100px;
    transition: 1s background-color;
    margin:0 auto;
    padding: 10px;
}

.btn-animation:hover
{
    animation-duration: 1s;
    animation-name: background;
    animation-fill-mode: forwards;
}

@keyframes background
{
from{
    background-color:#1caff6;
}

to{
    background-color:#0c394e;
}

If you're going from A to B and don't care how you get there, then you should use a transition. If you have several stops along the way and they're more complex, or if you want your animation to repeat in a very specific way, such as forever, then use an Animation. My rule of thumb is, if you're spending too much time on a transition, then an animation is the way to go.

How they work

CSS animations have a few different parts that make them tick. You can configure the timing, duration, delay and the timing function. But unlike transitions, in which we only have control of the start and end frames, animations give us much more fluid control of each of the rendered frames in between. We can even add and remove them as we please.

Animations consist mainly of 3 parts. Firstly is the Animation properties which control how the animation will behave.

The Animation Property

Much like transitions, we have the option of either the long hand notation or the short hand notation when setting our animation properties. Personally, I prefer to use the longer version as it makes it much easier to read.

p
{
    animation: 3s linear 1s slidein;
}

The first 'time' element will always be the duration period, while the second 'time' property is the 'delay'. The previous style is identical to the one right below.

   p
   {
       animation-duration: 3s;
       animation-timing-function: linear;
       animation-delay: 1s;
       animation-name: slidein;
   }

And while more concise, again, it's a bit tougher to read on more complex animations with more properties set.

Animation Sub-properties

Currently the animation specification supports the following properties, which you define inside of any elements you wish to animate.

animation-duration

Determines the amount of seconds that the animation should run for.

animation-delay

Determines how long the animation will wait before it begins, in seconds.

animation-direction

Sets whether the animation should either traverse backwards once completed, or revert to its original state immediately. By default, the direction is set to revert back to its from position once it has completed.

animation-iteration-count

The number of times to loop through the animation. Can also be set to 'infinite', causing it to repeat indefinitely. This is a great option for creating 'loading' icons.

animation-name

This is the name of the animation that we're referencing. This is defined in the keyframes which I'll cover down below. But essentially, we can generate just one animation 'recipe' and then reference it in multiple elements by name.

animation-play-state

Allows you to pause/play animation.

animation-timing-function

The animation-timing-function CSS property specifies how a CSS animation should progress over the duration of each cycle. The possible values are one or several .

animation-fill-mode

Configures what values are applied by the animation before and after it is executing. In the example below, the animation is set to run once and to keep its final state once it has completed.

So that's it for the animation properties that we can set. For most animations, I normally just use the duration, iteration count and the direction mainly.

@keyframes

Now that we went over the different ways to configure an animation, it's time to look at what actually makes the animation. Keyframes are grouped styles that we are going to be implementing per frame. You define a single keyframe for an animation and give it a name, as such:

@keyframes fadeup{

}

We then define all of our timing intervals for the animation inside of this keyframe by specifying time in percentages. For example:

@keyframes fadeup
{
    0%{
        /* start style goes here */
    }

    100%{
        /* end style goes here */
    }
}

Because a 'start' and 'end' state is required for an animation, the standard also allows us to alias the start/end percentages with 'from' and 'to':

@keyframes fadeup
{
    from{
        /* start style goes here */
    }

    to{
        /* end style goes here */
    }
}

If we left it here, the animation wouldn't be too different from a transition. But it is different, because not only do we define the start/end steps, but we have full access to any frame in between. If for example, I wanted my animation to start fast up to the halfway point, and then finish off gradually, I could include a style for the 50% mark.

@keyframes slidein {
  0% {
    margin-left: 100%;
    width: 300%; 
  }

  50% {
    margin-left:80%;
    width:200%;
  }

  100% {
    margin-left: 0%;
    width: 100%;
  }
}

And that is essentially it for keyframes. Those are the 2 essential parts of an animation. But there is indeed a 3rd part, which can give you even more granular control through JavaScript.

JavaScript and Animations

Just like with transitions, animations also give us a few events that we can take advantage of in JavaScript.

The following are the 3 events that we can attach to any of our animated elements.

var e = document.getElementById("textslide");
e.addEventListener("animationstart", animated, false);
e.addEventListener("animationend", animated, false);
e.addEventListener("animationiteration", animated, false);

e.className = "textslide";

function animated(e) {
    document.getElementById("animate-output").innerHTML = e.type + ' : ' + e.elapsedTime;
}

Let's see that in action.

So to recap, we configure our animation timing and pattern sequences with the Animation properties to begin. We can then create our Keyframes in which we'll define our various frames per animation. And if we need to, we have the final option of attaching the various timing events to our elements for finer control. Overall, a very simple process, but one that gets overlooked alot due to a perceived idea of complexity.