Chapter 5, Exercise 1 – CSS Transition Easing

Using the CSS transition example in which we animated the New Game button, experiment with some B├ęzier curve easing. Think about how different values might be useful in game animations.

Changing the button style definition in main.css to something like the following produces a very different scaling effect:

.button
{
  transition: background-color .3s ease-in-out, transform .2s cubic-bezier(.5, -2, .33, 1.8);
  -moz-transition: background-color .3s ease-in-out, -moz-transform .2s cubic-bezier(.5, -2, .33, 1.8);
  -webkit-transition: background-color .3s ease-in-out, -webkit-transform .2s cubic-bezier(.5, -2, .33, 1.8);
  -ms-transition: background-color .3s ease-in-out, -ms-transform .2s cubic-bezier(.5, -2, .33, 1.8);
}

Note that one of the cubic bezier parameters are negative, and another is greater than 1. Try experimenting with values between 0 and 1 to produce smoother effects, and you can try and visualize what the output might look like by playing with the graphing tool here: http://roblaplaca.com/examples/bezierBuilder/