🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

Setting CSS Animations: Make Elements Transition to Different Styles

Reading time 6 min
Published Aug 8, 2017
Updated Oct 15, 2019

TL;DR — CSS animations refer to making elements transition from one style to another. They consist of properties indicating how animations work and keyframes.

Create CSS animations

The CSS animation property is for making elements transition from one set of properties to another. To animate CSS properly, you have to specify keyframes that specify the beginning and end states for the animation.

Here is the syntax you can use for animating an element with CSS:

Example
/* For modern browsers */  
@-webkit-keyframes my-move {
   from {background-color: green;}
   to {background-color: lightblue;}
}
/* The standard way */
@keyframes my-move {
   from {background-color: green;}
   to {background-color: lightblue;}
}

More on keyframes

When you define CSS styles in the @keyframes rule, the animation gradually changes to the new style. The keyframes define how the animations look at specific moments.

In this example, we bind an animation to <div>t. We set the animation to last for 6 seconds and change the background-color of <div> from blue to green:

Example
/* Code for the animation */
@keyframes learn {
    from {background-color: blue;}
    to {background-color: green;}
}

/* The div element for the animation */
div {
     width: 150px;
    height: 150px;
    background-color: blue;
    animation-name: learn;
    animation-duration: 6s;
    border-radius: 90px;
}

Remember: since the default animation duration value is 0 seconds, the animation will not effect if the animation-duration property is not defined.

You can also use percentage values to set gradual changes in the style. Therefore, you control the style of every step of the animation.

In the following example, the background color changes when 30% of the animation is complete. Then, it changes to another color when 60% is completed and reaches its final color when the animation ends (100%).

Example
/* Code to animate */
@keyframes learn {
    0%   {background-color: blue;}
    30%  {background-color: red;}
    60%  {background-color: purple;}
    100% {background-color: pink;}
}

/* The div element */
div {
    width: 150px;
    height: 150px;
    background-color: blue;
    animation-name: learn;
    animation-duration: 6s;
    border-radius: 90px;
}

CSS animation examples show how you can use percentage values to gradually change other properties like position during the run of animation.

Example
/* The code to animate */
@keyframes learn {
    0%   {background-color: blue; left: 1px; top: 1px;}
    30%  {background-color: green; left: 300px; top: 1px;}
    60%  {background-color: red; left: 300px; top: 300px;}
    100% {background-color: purple; left: 1px; top: 1px;}
}

/* The div element */
div {
    width: 150px;
    height: 150px;
    position: relative;
    background-color: blue;
    animation-name: learn;
    animation-duration: 6s;
    border-radius: 90px;
}

Multiple animations

You can declare CSS multiple animations by separating each animation by commas.

Example
.example {
  height: 200px;
  width: 200px;
  background-color: salmon;
  animation: 
    learn 6s ease infinite alternate, 
    nudge 5s linear infinite alternate;
}

Fade-in

One of the CSS animation examples is setting a fade-in effect for elements.

You can create the CSS fade-in animation by using the @keyframes rule to specify opacity to go from 0 to 1.

Example
/* Code for the animation */
@keyframes learn {
 from {opacity: 0;}
 to {opacity: 1;}
}

/* The div element for the animation */
div {
 width: 150px;
 height: 150px;
 background-color: salmon;
 animation-name: learn;
 animation-duration: 6s;
 border-radius: 90px;
}

Note: the opacity property value can be anything from 0.0 to 1.0. The lower the value, the more transparent the element.

Rotation animation

You can create the CSS rotate animation by manipulating the spin effect. The following example sets a CSS rotate animation for an image:

Example
.image {
   position: absolute;
    -webkit-animation: spin 6s linear infinite;
    -moz-animation: spin 6s linear infinite;
    animation: spin 6s linear infinite;
}

animation-delay

The CSS animation-delay property defines how much time passes until the animation starts. The default value is 0, meaning that animation starts as soon as the page loads.

In this example, we delay the CSS animation for four seconds:

Example
div {
    width: 150px;
    height: 150px;
    position: relative;
    background-color: blue;
    animation-name: learn;
    animation-duration: 6s;
    animation-delay: 4s;
    border-radius: 90px;
}

animation-iteration-count

The animation-iteration-count property defines how many times an animation runs.

In this example, the animation runs five times:

Example
div {
    width: 150px;
    height: 150px;
    position: relative;
    background-color: blue;
    animation-name: learn;
    animation-duration: 6s;
    animation-iteration-count: 5;
    border-radius: 90px;
}

For the CSS animation to never end, you can use the infinite value:

Example
div {
    width: 150px;
    height: 150px;
    position: relative;
    background-color: blue;
    animation-name: learn;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    border-radius: 90px;
}

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

animation-direction

The CSS animation-direction property indicates whether an animation plays backward, forward, or alternates between the back and forth.

This example shows an animation running in the reverse direction (backward):

Example
div {
    width: 150px;
    height: 150px;
    position: relative;
    background-color: blue;
    animation-name: learn;
    animation-duration: 6s;
    animation-iteration-count: 5;
    animation-direction: reverse;
   border-radius: 90px;
}

In this example, the animation runs forward, then backward:

Example
div {
    width: 150px;
    height: 150px;
    position: relative;
    background-color: blue;
    animation-name: learn;
    animation-duration: 6s;
    animation-iteration-count: 5;
    animation-direction: alternate;
   border-radius: 90px;
}

The animation will start running backward, then run forward:

Example
div {
    width: 150px;
    height: 150px;
    position: relative;
    background-color: blue;
    animation-name: learn;
    animation-duration: 6s;
    animation-iteration-count: 5;
    animation-direction: alternate-reverse; 
   border-radius: 90px;  
}

animation-timing-function

The animation-timing-function property defines the speed curve of CSS animations.

The following example animates CSS with different speed curves:

Example
#div1 {animation-timing-function: ease;}
#div2 {animation-timing-function: ease-out;}
#div3 {animation-timing-function: ease-in-out;}
#div4 {animation-timing-function: ease-in;}
#div5 {animation-timing-function: linear;}

The list of possible values:

Value Description
ease (Default) Animation starts slowly, then becomes fast, but ends slowly
linear Animation speed is the same all the time
ease-in Animation starts slowly
ease-out Animation ends slowly
ease-in-out Animation starts and ends slowly. The part in between is played in normal speed
cubic‑bezier(n,n,n,n) You can specify your own chosen values

animation-fill-mode

The CSS animation-fill-mode property sets the way the CSS animations affect the style of targets before and after the animation ends.

The following example shows how animation-fill-mode works with forwards value. Notice how the element keeps the style of the last keyframe of the animation after it finishes.

Example
div {
    width: 150px;
    height: 150px;
    background: lightblue;
    position: relative;
    animation-name: learn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

Here are the main property values:

Value Description
none (Default) Animation does not affect the style of the element nor before nor after running the animation
forwards The style values of the last animation keyframe are applied to the element
backwards The style values of the first animation keyframe are applied to the element and kept during the animation-delay period
both The animation follows the rules of both forwards and backwards animation fill modes

The example below demonstrates how animation-fill-mode works with backwards value. You can see that the element has the style of the first keyframe before the animation even starts (during the delay).

Example
div {
    width: 150px;
    height: 150px;
    background: blue;
    position: relative;
    animation-name: learn;
    animation-duration: 2s;
    animation-delay: 1.5s;
    animation-fill-mode: backwards;
   border-radius: 90px;
}

This example shows how animation-fill-mode works with both values of backwards and forwards.

Example
div {
    width: 150px;
    height: 150px;
    background: blue;
    position: relative;
    animation-name: learn;
    animation-duration: 2s;
    animation-delay: 1.5s;
    animation-fill-mode: both;
   border-radius: 90px;
}

The element gets the style of the first keyframe before the animation is started. After the animation ends, the element keeps the style of the last keyframe.

The animate shorthand

The animation CSS shorthand declares all of the longhand properties in one declaration.

This example shows the use of six animation longhands:

Example
div {
    animation-name: learn;
    animation-duration: 6s;
    animation-timing-function: ease;
    animation-delay: 3s;
    animation-iteration-count: 5;
    animation-direction: reverse;
    border-radius: 90px;
}

We can achieve the same effect by using a single animation property:

Example
div {
    animation: learn 6s ease 3s 5 reverse;
}

All properties for the shorthand

Property Description
animation-delay Specifies the animation start with or without delay
animation-direction Defines direction of the animation
animation-duration Specifies how long one cycle lasts
animation-fill-mode Defines the element style before and after running the animation
animation-iteration-count Specifies how many times an animation runs
animation-name Defines the @keyframes animation name
animation-play-state Specifies the animation state – paused/running
animation-timing-function Defines the animation speed curve

List of animatable properties

These are the properties that are animatable using CSS:

Property
background
background-position
background-size
background-color
border (and its related properties)
box-shadow
bottom
color
clip
column-gap
column-count
column-width
column-rule-width
column-rule-color
column-rule
columns
filter
flex
flex-grow
flex-shrink
flex-basis
font
font-size-adjust
font-size
font-weight
font-stretch
height
letter-spacing
line-height
left
margin
margin-left
margin-bottom
margin-top
margin-right
max-width
max-height
min-width
min-height
order
opacity
outline
outline-offset
outline-width
outline-color
padding
padding-top
padding-right
padding-left
padding-bottom
perspective
perspective-origin
right
text-shadow
text-decoration-color
text-indent
transform-origin
transform
top
visibility
vertical-align
word-spacing
width
z-index

CSS Animation: Useful Tips

  • You need to animate CSS with caution as flashing colors, and specific kinds of motion could cause problems for people with disorders, migraine or epilepsy.
  • To make sure that CSS animations work on all browsers, you can include prefixes, such as -webkit-animation and -moz-animation.