CSS Transitions and Animations

June 29, 2018

One thing CSS3 brought us is the ability to create transitions and animations within the browser, something developers wanted for years.

With CSS3, we can not only create simple transitions, but also use so called “keyframes” which give us the ability to highly customize our animations. You can think of keyframes as individual frames in your animation, that are played one after another.

Let’s get started with CSS Transitions!

Transitions

Transition is a CSS animation in its simplest form. It gives us the ability to declare simple animations for events such as :focus, :hover, :active, :target etc. 

Syntax wise, it consists of 4 properties: transition-property, transition-duration, transition-timing-function and transition-delay, and the first three are the most commonly used ones.

The syntax is as follows:

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]

To make sure our transitions work everywhere, we should use the following vendor prefixes as usual: -webkit-, -moz-, -o-.

Transition property

Simply put, transition property tells the browser what CSS property to animate. You can name one CSS property per transition, or you can use “all”.

Note: Some of the CSS properties can’t be animated, but here’s the list which you can animate:

background-color, background-position, border-color, border-width, border-spacing, bottom, clip, color, crop, font-size, font-weight, height, left, letter-spacing, line-height, margin, max-height, max-width, min-height, min-width, opacity, outline-color, outline-offset, outline-width, padding, right, text-indent, text-shadow, top, vertical-align, visibility, width, word-spacing, z-index

There’s a quite of lot of them, and in most scenarios you will use only a few CSS properties.

Transition duration

Transition duration tells the browser the duration for which the transition should roll. You can use milliseconds(ms) or seconds(s).

Transition timing function

On to a little more complicated property. Transition timing function tells the browser the style of the animation. The most used properties are: linear, ease-in, ease-out, ease-in-out and cubic-bezier. You can see the various timing functions in the gif below:

Source: 33 css transition tricks and effects examples

Transition delay

This tells the browser how long it should wait before it runs the animation. As usual, it accepts milliseconds and seconds, same as transition-duration.

Transition shorthand

Declaring every transition individually can be quite boring and code intensive. Also when you add vendor prefixes the code can become unmaintainable. To fix that you can use shorthand which we saw earlier:

transition: [transition-property] [transition-duration] [transition-timing-function][transition-delay]

This way you can also declare multiple transitions per CSS property, for example:

transition: left 200ms ease-in-out, top 300ms ease-in-out

Transition example

In the example below you can check out how the transition property works.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{
      width: 100px;
      height: 100px;
      background-color: red;
      transition: left 1s linear;
      /*** SAME AS ***/
      /*transition-duration: 1s;
      transition-property: left;
      transition-timing-function: linear;*/
      position: absolute;
      top: 0;
      left: 0;
    }
    .box:hover{
      left: 100px;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

When you run this code, you’ll see that hovering over the box translates the left property from 0 to 100px over 1 second with a linear timing function.

Animation

If you want to create more complicated animations, you will likely have to use a CSS property called animation. This property gives us the ability to declare custom animations with as many CSS properties as we want.

To use animation property, we first need to define an animation by name using the @keyframes property, where we define what the object is supposed to look like at what time. 0% is the snapshot when the animation just starts, and 100% is the snapshot when the animation ends. Thus, keyframes give us the ability to declare custom animations on a timeline, going from 0% to 100%.

Suppose we want to define a fade-in animation. We will call it fadeIn:

@keyframes fadeIn{
  0%{
  opacity: 0;
  }
  100%{
  opacity: 1;
  }
}

This way we declared that when we activate the animation, the element should have opacity: 0 (i.e., invisible), and after some time (when it comes to 100%) it will become visible via opacity: 1.

Once the animation has been defined via @keyframes, we come to the step 2: actually using the animation property on the element we want to apply the custom animation we just defined.

animation itself has multiple subproperties: animation-name, animation-duration and animation-delay

Animation name

Here we pass name of the animation we created using @keyframes; in this case it’s fadeIn.

Animation duration

animation-duration declares the time it takes for the keyframes to go from 0% to 100%. For example, if we make animation duration take 1 second, at 0.5 seconds it will be at 50%, and at 1 second it will be at 100%.

Animation delay

animation-delay declares the time to wait before the animation is run. It is very similar to the transition-delay we saw in the last section.

Animation iteration count

animation-iteration-count declares what should happen with animation after it ends. Usually, it’s used to declare if animation should go infinite times (i.e., just keep looping) after it’s activated.

Animation Shorthand

Now after we know all the animation properties, we can also use the shorthand for it:

animation: [animation-name] [animation-duration] [animation-delay] [animation-iteration-count]

Here’s an example

animation: fadeIn 200ms infinite

Note that if we leave the animation-delay property empty, it will be 0 ms.

A note on compatibility

Again, it’s recommended to use vendor prefixes as usual:

-webkit-animation:  fadeIn 200ms 
-o-animation: fadeIn 200ms 
-moz-animation: fadeIn 200ms
animation: fadeIn 200ms

Animation example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>FadeIn Box</title>
  <style>
    .box{
      width: 100px;
      height: 100px;
      background-color: red;
      cursor: pointer;
      animation: fadeIn 1000ms infinite;
    }
    @keyframes fadeIn{
      0%{
        opacity: 0;
      }100%{
        opacity: 1;
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

Here’s the output of the code above:

Hope this tutorial helped you with CSS transition and animation properties. Here’s a quick recap of what we learned:

CSS Transitions: transition-property, transition-duration, transition-timing-function, transition-delay
CSS Animations: animation-name, animation-duration, animation-delay, animation-iteration-count properties.