What Is CSS Animation?

CSS animations were added at the start of CSS3 which allows you to transition from one CSS style to another. To use a CSS animation you will have to start styling the element and a number of keyframes to define the transition from start to end of the animation.

Before CSS animation was available, the way you would make an element change styling would be to use JavaScript to change an element's styling properties in a certain order.

The advantages of using CSS animation over JavaScript driven animations is that they run smoother than JavaScript, which commonly skipped keyframes. Browser rendering engines are built to work better with CSS animation. They are also easier to develop as all coding of the animation is done in CSS and you just select which properties to change at certain keyframes.

The Basics

To start using CSS animation you first need a starting element.

<div id="animated-example" class="animated bounce"></div>

Next we need to style the element.

#animated-example { 
   background: #cd4436; 
   height: 200px; 
   margin: 20px auto; 
   width: 300px; 
   box-shadow: inset 0 0 7px rgba(0,0,0,0.7); 
}

Now we can set up the animation properties of how we want the animation to run.

.animated { 
    animation-duration: 1s; 
    animation-fill-mode: both; 
    animation-iteration-count:infinite; 
}

.bounce { 
    animation-name: bounce; 
}

We've also added a new class that will attach an animation called bounce, next we can create the keyframes of how we want the animation to act. To change the element to look like it's bouncing we are going to change the y-axis of the element by using translateY property.

@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
    40% {transform: translateY(-30px);} 
    60% {transform: translateY(-15px);} 
}

Below you can see what this creates.

Using these basics of CSS animation you can now use your imagination and create any sort of animation you want.

CSS Animation Properties

At the start of any CSS animation you need to define the settings of how you want it to perform such as delay, duration, iteration counts and timing functions.

Animation Delay

This property allows you to define how many seconds you want to delay the start of the animation. For example without setting the animation on an event it will start on the load of the page.

.animation
{
    animation-delay: 2s;
}

Animation Direction

Allows you to define if you want the animation to run normal or in reverse.

.animation
{
    animation-direction: normal;
    animation-direction: reverse;
}

Animation Duration

This allows you to define the total time it takes for the animation to run for, which therefore determines the speed of transitions between the animation keyframes.

.animation
{
    animation-duration: 5s;
}

Animation Fill Mode

The property allows you to define the style of the element when animation is not playing.

There are 4 main values for the property, none, forwards, backwards and both.

None, will not change the styling before and after the animation starts.

Forwards, will maintain the styling of the element from the last animation keyframe.

Backwards, will keep the styling of the element from the first animation keyframe.

Both, will apply the styling from both forwards and backwards.

.animation
{
    animation-fill-mode: none;
    animation-fill-mode: forwards;
    animation-fill-mode: backwards;
    animation-fill-mode: both;
}

Animation Iteration Count

This property will allow you to define how many times the animation loops, this can be a number of times or defined as infinite.

.animation
{
    animation-iteration-count: infinite;
    animation-iteration-count: 1;
    animation-iteration-count: 20;
}

Animation Name

The property specifies the name of the set of keyframes the animation is going to run.

@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
    40% {transform: translateY(-30px);} 
    60% {transform: translateY(-15px);} 
}

.animation
{
   animation-name: bounce;
}

Animation Playing State

This property allows you to define if the animation is paused or running. By default it is set to running but can set to paused and then from another event.

.animation
{
   animation-play-state: running;
   animation-play-state: paused;
}

Animation Timing Function

This property allows you to define an animation timing function to run through the animation.

.animation
{
    animation-timing-function: ease;
    animation-timing-function: ease-in;
    animation-timing-function: ease-out;
    animation-timing-function: ease-in-out;
    animation-timing-function: linear;
    animation-timing-function: step-start;
    animation-timing-function: step-end;
}

Keyframes

Keyframes is what tells the animation what styling properties to change and when in the animation. To start this you first define the keyframes using the @ symbol followed by the name for the group of keyframes.

@keyframes bounce {

}

Next you will define at what stages of the animation where you want to change the properties. This can be defined in percentages through the animation or defined as from and to.

@keyframes bounce-up {
    from
    {
        transform: translateY(0);
    }

    to
    {
        transform: translateY(-30px);
    }
}

@keyframes bounce 
{
    0%   {transform: translateY(0);} 
    20%  {transform: translateY(0);} 
    40%  {transform: translateY(-30px);}
    50%  {transform: translateY(0);}
    60%  {transform: translateY(-15px);}
    80%  {transform: translateY(0);} 
    100% {transform: translateY(0);}  
}

Browser Support

Browser support for CSS animation is current at 90.3%.

Chrome Internet Explorer Firefox Safari Opera
43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-

CSS Animation Browser Support

CSS Animation Tool

Here at Coveloping we have developed a CSS animation tool that allows you to play around with over 55 preset CSS animations to use in your web projects.

CSS Animation

CSS Animation Tool

Coveloping Membership

Access to a range of developer tools, get your first month free

Start Your Free Trial

Don't miss out!

Sign up to our newsletter for the latest news from Coveloping

Leave a Reply

Your email address will not be published. Required fields are marked *

Code Copied!