Creative Services Toolkit

Tutorials

CSS Transitions and Animations

Transitions and Animations are native to CSS, are preformance optimized, and simple to write.

Purpose

The purpose of this tutorial is to teach you about CSS transitions and CSS animations. We'll talk about how they work and also the advantages/disadvantages over javascript based animation methods

Why does it matter?

CSS Transitions and Animations are native to CSS, that means the browser understands them without having to download external files. When file size restrictions get tighter in the near future it may be helpful to avoid loading TweenMax or other Javascript libraries for animation (Though those libraries are awesome).

Overview

Transitions:
A CSS transition allows most CSS properties to transition from one value to another value.
Example: If you have a div that is opacity:0 and you want it to change to opacity:1 a transition will gradually increase the opacity from 0 to 1 over a period of time that you define.

Animations:
A CSS animation is a keyframe based animation method that allows you to change CSS properties over time.
Where transitions are designed to change one value to another, animations allow you to have multiple stopping points (multiple keyframes) along the way, animating items with very specific control.
Example: In an animation you could increase the div's opacity from 0 to 0.9 to 0.5 then to 1.

Transitions: The Property

  • The transition property has 2 required values:
    • Property: the CSS property you want to transition, "opacity", "margin-top", "transform" etc
    • Time: the time you want to transition it over in seconds, followed by an s. Like 1s for 1 second
  • There are also a few optional properties you can add to change the transition:
    • Delay: if you want to delay the transition you can add time in seconds just like for the transition time. 0.5s would delay the transition by 1/2 a second.
    • Easing: Transitions can have easing just like Tweens in Javascript. See Transition: Easing section below.

Transitions: A Basic Example

  • The CSS above makes a thumbnail opacity 0 by default (on-load).
  • The transition property tells the browser that when opacity is changed on the thumbnail, change it over 0.5 seconds, instead of instantly.
  • The hover state changes the opacity to 1. When we hover over the thumbnail it's going to animate from opacity 0 to opacity 1 over 1/2 a second.

Transitions: Change Multiple Properties

  • The transition property allows us to define multiple properties that can be transition, and to set their transition time independently.
  • The code above starts the thumbnail at opacity 0 and also scales it down so it's size is 0x0.
  • The hover state changes the opacity to 1 over 1/2 a second, but it also changes the scale back to the original size over 1 second.
  • You can define as many properties/time combinations as you like

Transitions: Easing

  • The easing (or transition-timing-function) works just like easing in JS animation. It speeds up or slows down parts of the animation to change how it looks.
  • There are many options for easing in CSS:
    • linear
    • ease
    • ease-in
    • ease-out
    • ease-in-out
    • steps: makes the transition occur in steps, instead of smoothly (think animated gif). Check out this link for a tutorial on step easing (or ask Nick).
    • cubic-bezier: allows you to create a custom easing curve. It's hard by hand but you can easily make one here
  • Just like you can set a time for each property to transition, you can also set a unique easing for each.

Animations: The Property

  • The animation property has 2 required values:
    • Keyframe name: the name of the keyframes that goes along with the animation - see keyframe section below
    • Time: the time you want to animate it over in seconds
  • There are also a few optional properties you can add to change the animation:
    • Delay: if you want to delay the animation you can add time in seconds.
    • Easing: Animations can have easing just like Tweens in Javascript. See Transition: Easing section above because it's the same.
    • Loops: If you want the animation to loop you can type the number of times, or "infinite".
    • Direction: Lets the animation run in reverse, or stop at the end. "Forwards" insures that the animation stays on the last keyframe, by default it returns to the first one when done.

Animations: Keyframes

  • The keyframes sets up how the animation will work and which properties will change.
  • The keyframe name (example above) must match the name from the animation property
  • Keyframes are made up of percentage values followed by which properties should change at that time.
    Example: 50% { opacity:1 }. This means when the animation is 50% complete the opacity will be at 1.
  • The 0% and 100% keyframes can be omitted. If so they values will use whatever is defined in normal CSS outside the animation, or the defaults. See the example below

Animations: A Basic Example

  • The CSS above makes a thumbnail opacity 0 and top 50px by default. It then tells the browser to run the example animation.
  • The keyframes tell the browser that when the animation is 50% over the thumbnail should be at top:200px and opacity:1.
  • Because 0% and 100% are not defined the browser starts with the values we defined in the .thumbnail class (top 50px and opacity:0). It then animates them to the 50% values after 0.5 seconds and then back to the starting values at 1 second.

Real Life Examples

Kohls Pushdown: Click Here.
The hotspot pulse and the text tabs appearing is done by CSS Animations. The hotspots loop and the tabs have a delay so they come out at different times.
The hotspot hover effect is done with transitions, changing the size of the spot and the position of the tab.