动画效果，过渡效果

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>网站首页</title>
 6     <style>
 7     .ttt{
 8         -webkit-animation:cc 15s ease-in 0 infinite alternate ;
 9         -ms-animation:cc 15s ease-in 0 infinite alternate ;
10     }
11     @-ms-keyframes cc{
12         0%{color:red;}
13         25%{color:green;}
14         50%{color:blue;}
15         75%{color:yellow;}
16         100%{color:purple;}
17     }
18 
19     
20     @-webkit-keyframes cc{
21         0%{color:red;}
22         25%{color:green;}
23         50%{color:blue;}
24         75%{color:yellow;}
25         100%{color:purple;}
26     }
27     
28     @-webkit-keyframes aa{
29         from { color:red; }
30         to { color:green; }    
31     }
32     </style>
33 </head>
34 
35 <body>
36 <h1 class="ttt">文字颜色不停的变化</h1>
37 </body>
38 </html>

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>网站首页</title>
 6     <style>
 7     h1{
 8         width:400px;
 9         height:150px;
10         text-align:center;
11         margin:0 auto;
12         line-height:150px;
13         cursor:pointer;
14         color:red;
15         -webkit-animation:yy .5s ease-in 0 infinite alternate;
16     }
17     
18     h1:hover{
19         -webkit-animation-play-state:paused;
20     }
21     @-webkit-keyframes yy{
22         to{
23             color:yellow;
24             /*background-color:blue;*/
25             font-size:60px;    
26         }
27         from{
28             color:red;
29             /*background-color:#fff;*/
30             font-size:1px;
31         }
32             
33     }
34     </style>
35 </head>
36 
37 <body>
38 <h1>标题文字效果</h1>
39 </body>
40 </html>

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>网站首页</title>
 6     <style>
 7     img{
 8         -webkit-animation:yy .5s ease-in 0 infinite normal;
 9     }
10     
11     img:hover{
12         -webkit-animation-play-state:paused;
13     }
14     
15     @-webkit-keyframes yy{
16         to{
17             -webkit-transform:rotate(0);
18         }
19         from{
20             -webkit-transform:rotate(360deg);
21         }
22             
23     }
24     </style>
25 </head>
26 
27 <body>
28 <img src="images/circle.png">
29 </body>
30 </html>

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>网站首页</title>
    <style>
    h1{
        width:300px;
        
        /*background-color:red;*/
        /*border:1px solid green;*/
        -webkit-animation:yy .5s ease-in 0 infinite alternate;
    }
    
    h1:hover{
        -webkit-animation-play-state:paused;
    }
    
    @-webkit-keyframes yy{
        to{
            -webkit-transform:translate(100px,200px);
        }
        from{
            -webkit-transform:translateX(0,0);
        }
            
    }
    </style>
</head>

<body>
<h1>text</h1>
</body>
</html>

 1 <!DOCTYPE html>
 2 <html lang="zh-cmn-Hans">
 3 <head>
 4 <meta charset="utf-8" />
 5 <title>2D transform_CSS参考手册_web前端开发参考手册系列</title>
 6 <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
 7 <style>
 8 h1{clear:both;padding-top:10px;font-size:16px;font-family:Arial;}
 9 .test{zoom:1;width:700px;margin:0;padding:0;list-style:none;}
10 .test li{float:left;margin:20px 30px 0 0;border:1px solid #000;}
11 .test li p{width:300px;height:100px;margin:0;background:#ddd;}
12 .test .matrix{-moz-transform:matrix(0,1,1,1,10px,10px);-webkit-transform:matrix(0,1,1,1,10,10);-o-transform:matrix(0,1,1,1,10,10);-ms-transform:matrix(0,1,1,1,10,10);transform:matrix(0,1,1,1,10,10);}
13 .test .translate p{-moz-transform:translate(5%,10px);-webkit-transform:translate(10px,10px);-o-transform:translate(10px,10px);-ms-transform:translate(10px,10px);transform:translate(10px,10px);}
14 .test .translate2 p{-moz-transform:translate(-10px,-10px);-webkit-transform:translate(-10px,-10px);-o-transform:translate(-10px,-10px);-ms-transform:translate(-10px,-10px);transform:translate(-10px,-10px);}
15 .test .translateX p{-moz-transform:translateX(20px);-webkit-transform:translateX(20px);-o-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}
16 .test .translate3 p{-moz-transform:translate(20px);-webkit-transform:translate(20px);-o-transform:translate(20px);-ms-transform:translate(20px);transform:translate(20px);}
17 .test .translateY p{-moz-transform:translateY(10px);-webkit-transform:translateY(10px);-o-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px);}
18 .test .translate4 p{-moz-transform:translate(0,10px);-webkit-transform:translate(0,10px);-o-transform:translate(0,10px);-ms-transform:translate(0,10px);transform:translate(0,10px);}
19 .test .rotate{-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);-o-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg);}
20 .test .rotate2{-moz-transform:rotate(5deg);-webkit-transform:rotate(5deg);-o-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg);}
21 .test .scale{-moz-transform:scale(.8);-webkit-transform:scale(.8);-o-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);}
22 .test .scale2{-moz-transform:scale(1.2);-webkit-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);}
23 .test .skew{-moz-transform:skew(-5deg);-webkit-transform:skew(-5deg);-o-transform:skew(-5deg);-ms-transform:skew(-5deg);transform:skew(-5deg);}
24 .test .skew2{-moz-transform:skew(-5deg,-5deg);-webkit-transform:skew(-5deg,-5deg);-o-transform:skew(-5deg,-5deg);-ms-transform:skew(-5deg,-5deg);transform:skew(-5deg,-5deg);}
25 </style>
26 </head>
27 <body>
28 <h1>矩阵变换：matrix()</h1>
29 <ul class="test">
30     <li class="matrix">
31         <p>transform:matrix(0,1,1,1,10,10)</p>
32     </li>
33 </ul>
34 <h1>平移：translate(), translateX(), translateY()</h1>
35 <ul class="test">
36     <li class="translate">
37         <p>transform:translate(5%,10px)</p>
38     </li>
39     <li class="translate2">
40         <p>transform:translate(-10px,-10px)</p>
41     </li>
42     <li class="translateX">
43         <p>transform:translateX(20px)</p>
44     </li>
45     <li class="translate3">
46         <p>transform:translate(20px)</p>
47     </li>
48     <li class="translateY">
49         <p>transform:translateY(10px)</p>
50     </li>
51     <li class="translate4">
52         <p>transform:translate(0,10px)</p>
53     </li>
54 </ul>
55 <h1>旋转：rotate()</h1>
56 <ul class="test">
57     <li class="rotate">
58         <p>transform:rotate(-15deg)</p>
59     </li>
60     <li class="rotate2">
61         <p>transform:rotate(15deg)</p>
62     </li>
63 </ul>
64 <h1>缩放：scale()</h1>
65 <ul class="test">
66     <li class="scale">
67         <p>transform:scale(.8)</p>
68     </li>
69     <li class="scale2">
70         <p>transform:scale(1.2)</p>
71     </li>
72 </ul>
73 <h1>扭曲：skew()</h1>
74 <ul class="test">
75     <li class="skew">
76         <p>transform:skew(-5deg)</p>
77     </li>
78     <li class="skew2">
79         <p>transform:skew(-5deg,-5deg)</p>
80     </li>
81 </ul>
82 </body>
83 </html>

来源：https://www.cnblogs.com/lsr111/p/4387711.html

标签

transform

webkit