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/