Customizing Media Elements - HTML5 Media - page 51

The transition I use the most is the following, which enables the transition for all CSS proper-
ties, with a one second duration and using the ease-in-out transition timing function:
transition: all 1s ease-in-out
Since the transition properties haven't been formalized yet, vendor-specific settings need to
be used. Example 12 shows the transition properties (highlighted) added to the stylesheet for
the video element in the example we've been building on—enabling a nice, smooth transition
between the rotated scaled video and the normal view.
Example12.Addingthetransitionpropertytotheexistingstylesettingsforthevideoelement
video
{
/* basic border */
border: 1px solid #ccc;
padding: 20px;
margin: 20px;
border-radius: 20px;
/* add regular background */
background-color: #ffcccc;
/* add gradient background */
background-image: -moz-linear-gradient(top, #fff, #fcc);
background-image: -webkit-linear-gradient(top, #fff, #fcc);
background-image: -o-linear-gradient(top, #fff, #fcc);
background-image: -ms-linear-gradient(top, #fff, #fcc);
background-image: linear-gradient(top, #fff, #fcc);
/* now a shadow */
-webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px #ccc;
/* now transform */
-moz-transform: scale(0.5) translate(-100px, 0) rotate(90deg);
-webkit-transform: scale(0.5) translate(-100px, 0) rotate(90deg);
-o-transform: scale(0.5) translate(-100px, 0) rotate(90deg);
-ms-transform: scale(0.5) translate(-100px, 0) rotate(90deg);
transform: scale(0.5) translate(-100px, 0) rotate(90deg);
/* set up transition */
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;