A, CSS3 transitions
(A), CSS3 transition Profile
CSS3 transitions is an element gradually change from one style to another effect.
Two elements of implementing a transition effect:
- Provisions to add effects to which CSS properties
- Duration of effect the provisions of
Custom animation rules
Transition Transition (effect) an attribute element from the "a value of" transition to "another value" within a specified period of time
(B), transition properties
Syntax: {transition: the duration of the transition method attribute name}
transition-timing-function property values
Example:
Examples of transition using transition provided
<!doctype html> <html> <head> <title></title> <style> div { width:100px; height:100px; background:blue;
transition:width 2s; } div:hover { width:600px; height:600px; text-align: center; line-height:100px; background:url(1.jpg); background-position:top; background-repeat: no-repeat; } </style> </head> <body> <div>kaka</div> </body> </html>
From a cube
The transition to a background image
