CSS Transitions

Animation to boost UX by motion hints


Transitioning between states is better than just jumping.

Hover over these buttons to see the difference.


  transition: all .8s;

This is using the css3 transition property. Notice it's set on the element and not on it's hover pseudo class.

  • transition-property (can target a specific property or "all" to apply to any)
  • transition-duration (1s or .5s etc)
  • transition-timing-function (optional) (linear, ease-in, ease-out, etc.)
  • transition-delay (optional) (1s or .5s etc)

The css shorthand:
transition: property duration timing(optional) delay(optional)

transition: all .8s
transition: background-color .8s

The timing property is better visualized when transitioning position rather than color.

transition: all 2s linear;
transition: all 2s ease-out;
transition: all 2s ease-in;
transition: all 2s ease-in-out;
transition: all 2s cubic-bezier(0.68, -0.55, 0.27, 1.55);

Beyond hover

Triggering motion by hover doesn't do as much for us on touch devices. So now we achieve it by adding/removing classes.

Let's start with a simple pink box that we'll move by adding/removing css classes.

<input id="turboBtn" type="button" value="Start">

  <div class="pinkbox"></div>

$(document).ready(function() {
    $( "#turboBtn" ).click(function() {
  background-color: pink;
  border: 1px black solid;
  transition: all 2s linear;
  -webkit-transform: translateX(400px); /* for iOS */
          transform: translateX(400px);


We have our transition style defined with transition: all 2s linear; but the destination/target/goal of our animation is in a separate class which we will add or remove to our <div class="pinkbox"></div> to activate/deactivate the motion.

Performance issues (only these are safe)

  • Position - transform: translate(npx, npx)
  • Scale - transform: scale(n)
  • Rotation - transform: rotate(ndegree)
  • Opacity - opacity: 0...1

Some use cases

fade to color: [code]

hover me

image to desc [code]

Bill M.

image to desc (with zoom) [code]

Bill M.

circle (transition:cubic-bezier; transform:scale) [code]

Forms [code]

Button (hover and click animation) [code]