Beginning AngularJS

Chapter 9 ■ angularJS animation

padding: .3em;
background-color: orange;
color: #000000;
transition: all .5s;
}

.navButton:hover {
width: 110px;
background-color: green;
color: #ffffff;
transform:rotate(-6deg);
}

This is essentially the same as Listing 9-2, with the differences shown in bold. Note the more concise transition
declaration here. We’ve stated that all properties can be transitioned, and each of them should take half a second.
The main addition is the transform property we see in .navButton:hover. Here, we set an end state with a rotation
of -6 degrees, and we assume the default (0 degrees) rotation that implicitly exists in the initial state. Figure 9-4 shows
the start and end states.

Figure 9-4. Transitions combined with a transform

An unusual aspect of transforms is that they don’t really care what is going on around them. That is to say, they
will obscure other elements as opposed to pushing them out of the way. As Figure 9-4 demonstrates, the About Us div
has obscured the bottom right and the top left of the divs it originally sat neatly between. This isn’t a good or a bad
thing; it’s just something to be aware of when you are planning how your effect or animation should work.
There is a whole lot more to CSS3 animation than the small glimpse offered here, but this should be just enough
to help you get started in applying animations within Angular. There is an abundance of tutorials available online, and
several good books available on the topic. I found the title Pro CSS3 Animation by Dudley Storey (Apress, 2012) to be a
particularly focused and useful resource.