CSS3 Transition Transition Foundation Demo

Excessive code

<! DOCTYPE html>"en">"Viewport"Content="Initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"> <meta charset="UTF-8"> <meta name="Author"Content="Haley"> <meta name="Keywords"Content=""> <meta name="Description"Content=""> &LT;TITLE&GT;CSS3 Transition transition</title> <style>Div.ra {width:100px;            height:100px;            Background: #00AEEF;            Transition:all 2s; -moz-transition:all 2s;/*Firefox 4*/-webkit-transition:all 2s;/*Safari and Chrome*/-o-transition:all 2s;/*Opera*/} div.ra:hover {height:200px; -webkit-transform:rotate (180deg);/*Chrome, Safari, Opera*/transform:rotate (180deg);            width:300px;            Background: #0000ff;        Color: #fff; } Table{border-collapse:collapse;border-spacing:0; } table td,table th{border:1px solid #333; Text-align:center; Vertical-align:middle;            height:30px; line-height:30px;; }    </style>class="RA">div content </div><div> <ul> <li>transition properties can be size, color, animation </li> <li> Time Curve transition-timing-function:<table> <thead> <tr><th> Values </th><th> description &LT;/TH&GT;&LT;/TR&G                T </thead> <tbody> <tr><td>linear</td><td> Provision of transition effects starting at the same speed to the end Fruit (equals Cubic-bezier (0,0,1,1)）。 </td></tr> <tr><td>ease</td><td> Specify slow start, then fast, then slow end transition effect (cubic-bezier (0.25,0.1,0.25,1)）。 </td></tr> <tr><td>ease-inch</td><td> Specifies a transition effect that starts at a slow speed (equal to Cubic-bezier (0.42,0,1,1)）。 </td></tr> <tr><td>ease- out</td><td> Specifies the transition effect at a slow end (equal to Cubic-bezier (0,0,0.58,1)）。 </td></tr> <tr><td>ease-inch- out</td><td> Specifies a transition effect that starts and ends at a slow speed (equal to Cubic-bezier (0.42,0,0.58,1)）。 </td></tr> <tr><td>cubic-bezier (n,n,n,n) </td><td> Define yourself in the Cubic-bezier function The Value. The possible values are0To1Between the Values. </td></tr> </tbody> </table> </li> <li><a H ref="http://www.runoob.com/cssref/css3-pr-transition-timing-function.html"> More Information </a></li> </ul></div></body>
CSS3 Transition Transition Foundation Demo