Chapter 9 ■ angularJS animation■ Tip You can learn more about SaSS at http://sass-lang.com/. Stylus is a good alternative to SaSS, and you can
learn more about this one at http://learnboost.github.io/stylus/. there are other good CSS preprocessors out
there; these just happen to be two i have personally used and found to be very effective and well-supported.
Transitions
Transforms can be fun in their own right, but they become even more interesting when coupled with CSS3 transitions.
A transition is simply an animation from one set of CSS properties to another set of CSS properties, set to occur over
a specified period of time. A transition has four key responsibilities: it must control which properties to animate, the
duration of the animation, the type of animation, and (optionally) how long to wait before starting the animation.
A transition isn’t an island unto itself; we need a few things in place before we can produce one. They are as
follows:
• Two styles: One style is to represent the initial look of the element and another the end state of
the transition, for example, an element that starts off at normal size but transitions to become
two times larger.• The transition property: This is the special ingredient that makes the animation possible.
In general, you apply the transition property to the initial style of the element, the style that
dictates the look of the element prior to the animation starting.• A trigger: The trigger is the action that causes the transition between the two styles. Within
CSS, you can use several pseudo-classes to trigger an animation: hover, active, focus, and so
forth. You can also use JavaScript to trigger animations. Keep in mind that you only need to
set a transition on an element once. The browser will take care of animating from one style to
another and back to the original style, when the trigger no longer applies.Look at Listing 9-2. This is a very basic example, but it shows each of the preceding points in practice.Listing 9-2. Transitions in Action
<!DOCTYPE html>