HTML and CSS Reference
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
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.
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:
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.
Length of time a transition takes.
Used to determine the intermediate effects of the transition. Named values include ease ,
linear , ease-in , ease-out , and others.
When the transition will start.
A shortcut that combines all of the above values.