Customizing Media Elements - HTML5 Media - page 50

Animating the Transforms with CSS3 Transitions
I like the effect of rotating the video and scaling it larger when it gets focus. I can see using
this if you have several videos you want to add to a page and have limited space. What I don't
like, though, is that the fact that the transformation is so abrupt.
I'm not alone in this dislike of abrupt transitions. We've learned from our web page readers
over the years that they would rather see a transition in action then to see an abrupt change.
The transition shouldn't be too slow, but a suggestion of smooth movement that progresses
from point A to point B seems to please the most people. However, creating these smooth
transitions in the past using JavaScript has always been a rather daunting task.
Luckily, CSS3 again comes to the rescue with the transition properties. And, as with CSS
transforms, CSS transitions work nicely with the media elements, including the video element.

NOTE

If you're already familiar with the CSS3 transition properties, you might want to skip to Example 13
at the end of this section. If you need more background on transitions, check out Mozilla's document-
ation on this new CSS functionality at https://developer.mozilla.org/en/CSS/CSS_transitions .

The CSS3 transition properties are:

transition-property transition-property

Acceptable values are all , none , or the CSS property being tracked, such as opacity or
transform . Choosing all applies the transition to any CSS property change.

transition-duration transition-duration

Length of time a transition takes.

transition-timing-function

Used to determine the intermediate effects of the transition. Named values include ease ,
linear , ease-in , ease-out , and others.

transition-delay transition-delay

When the transition will start.

transition transition

A shortcut that combines all of the above values.