HTML 5--transitions Animations,and Transformations

1.transitions

示例代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5     div{
 6         width:200px;
 7         height: 200px;
 8         background: red;
 9         -webkit-transition:width 4s;
10         -o-transition:width 4s;
11     }
12         div:hover{
13             width: 400px;
14     }
15     </style>
16 
17 </head>
18 <body>
19 
20 <div></div>
21 <p>将鼠标放在div元素位置，来查看过度效果</p>
22 </body>
23 </html>

View Code

旋转：

示例代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5     div{
 6         width:100px;
 7         height: 100px;
 8         background: red;
 9         -webkit-transition:width 2s,height 2s,
10         -webkit-transform 2s;
11         -o-transition:width 4s;
12     }
13         div:hover{
14             width: 400px;
15             height:400px;
16             transform: rotate(180deg);
17             -webkit-transform:rotate(360deg);
18     }
19     </style>
20 
21 </head>
22 <body>
23 
24 <div></div>
25 <p>将鼠标放在div元素位置，来查看过度效果</p>
26 </body>
27 </html>

View Code

测试结果：

2.Animations:

示例代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5     div{
 6         width:100px;
 7         height: 100px;
 8         background: red;
 9         position: relative;
10         -webkit-animation:myfirst 5s infinite;
11         -webkit-animation-direction:alternate;
12     }
13     @-webkit-keyframes myfirst{
14         0% {background:red;left :0px;top:0px;}
15         25% {background:yellow;left:200px;top:0px;}
16         50% {backgroung:blue ;left:200px;top:200px;}
17         75% {background:green;left:0px;top:200px;}
18         100% {backgroung:red;left:0px;top:0px;}
19     }
20     </style>
21 
22 </head>
23 <body>
24 <p>
25     <strong>注释：</strong>Internet Explorer 9 以及更早版本不支持 animation-direction 属性
26 </p>
27 <div></div>
28 
29 </body>
30 </html>

View Code

测试结果：

3.Transformations

示例代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5     div{
 6         width:100px;
 7         height: 100px;
 8         background-color: red;
 9         transform: rotate(60deg);
10         -webkit-transform:rotate(60deg);
11         /*
12         -webkit-animation:myfirst 5s infinite;
13         -webkit-animation-direction:alternate;*/
14     }
15     </style>
16 
17 </head>
18 <body>
19 <div></div>
20 
21 </body>
22 </html>

View Code

测试结果：