CSS Transitions

Animation to boost UX by motion hints

2015-09-03

Transitioning between states is better than just jumping.

Hover over these buttons to see the difference.

vs.

.button2{
  transition: all .8s;
}
.button2:hover{
  background-color:red;
}

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.

HTML/jQuery:
<input id="turboBtn" type="button" value="Start">

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

<script>
$(document).ready(function() {
    $( "#turboBtn" ).click(function() {
      $('.pinkbox').toggleClass('turbo');
    });
});
</script>
CSS:
.pinkbox{
  display:inline-block;
  width:50px;
  height:50px;
  background-color: pink;
  border: 1px black solid;
  transition: all 2s linear;
}
.turbo{
  -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]