Intro to CSS Animations

Animations in action

Have you ever wanted to add a little extra flair to your webpage, but weren’t sure what else you could add? CSS Animations are here to help you out! The animation property allows you to use CSS to animate certain properties on your page such as colors, position or height and width. Each animation needs to be defined with an @keyframes rule, and called with an animation property in the css selector.

A simple color change animation would look similar to this:

.element {   
  animation-name: changeColor;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}
@keyframes changeColor {   
  0% {     
    background-color: #001F3F;   
  } 
  100% {     
    background-color: #FF4136;   
  } 
}

Let’s break this code snippet down. Our element class is given properties for the animation name, animation duration and animation iteration count. The animation name is what we will reference to determine behavior of the animation via keyframe rules. The animation duration is how long the animation will take from start to finish. The animation iteration is the number of times that an animation will be run upon completion, using “infinite” specifies that the animation will continue to repeat as long as the page is open.

To get the animation to run, we then need to specify the keyframes rule to define the animation behavior. In this case, we say at 0% (or the beginning of the animation) the background color is equal to the hex code #001F3F, then at 100% (the end of the animation) the background color is changed to hex code #FF4136. Following our specifications in the animation property of our class element, the resulting behavior would give you a change in the background color that transitions from the starting color to the ending color over the course of five seconds and will continue to repeat on an infinite loop.

So what else can animations do?

In the previous example we only set the animation name, duration and iteration count, but animations have some other sub-properties that can be useful to create the desired effect. Animation sub-properties include:

• animation-timing-function: allows you to preset acceleration curves, such as ease-in, ease-out, linear, etc.
• animation-delay: specifies the duration between when the element loads and when the animation begins.
• animation-direction: sets the direction of the cycle for the animation such as reverse or alternate. Ex: default runs animation from 0% → 100%, alternate runs animation from 0% → 100% then from 100% → 0% on the next iteration.
• animation-fill-mode: sets values for before/after the animation. For example, you can specify the last state of the animation to stay on the screen rather than revert to the starting state.
• animation-play-state: specifies whether the animation plays or pauses

CSS animations don’t apply to all CSS properties, for example you cannot write an animation for background-image property. For a list of all properties that can be manipulated using animations reference the following link:

Animatable CSS properties

One property that can be fun to play with is the transform property, which has a few different options that are optimized for performance in the broswer. One I would like to highlight is tranform: rotate(xdeg) which you can use to angle or spin your element on the page. Rotate takes in an argument of the number of degrees you would like to rotate, like so:

.element {
  height: 200px;
  width: 200px; 
  background-color: red;
  animation-name: spin;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
    

The above code will take the element and spin it a full 360 degrees over a span of 4 seconds, and loop the animation infinitely, similar to below:

I encourage you to explore further and test the possibilities of animations. They can add some really cool features on your page!