CSS动画@-webkit-keyframes

@-webkit-keyframes：以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。

display: inline-block;    行内块元素，不会产生错位
-webkit-animation-timing-function: linear;   线性过度

　　

-webkit-animation-iteration-count: infinite;   设置循环播放次数：无限次

　　

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         .div1 {
  8             width: 200px;height: 200px;background-color: #ffc602;
  9             margin-top: 100px;
 10             display: inline-block;   
 11  
 12         }
 13         @-webkit-keyframes mycolor1{
 14             0%{
 15                 background-color: #ffc602
 16             }
 17             20%{
 18                 background-color: #1363bc;
 19                 height:250px
 20             }
 21             40%{
 22                 background-color: #cf0fff;
 23                 height:300px
 24             }
 25             60%{
 26                 background-color: #810977;
 27                 height:350px
 28             }
 29             80%{
 30                 background-color: #c91f10;
 31                 height:400px
 32             }
 33             100%{
 34                 background-color: #ffc602;
 35                 height:450px
 36             }
 37  
 38         }
 39         .div1:hover{
 40             -webkit-animation-name: mycolor1;
 41             -webkit-animation-duration: 1s;
 42             -webkit-animation-timing-function: linear;
 43             -webkit-animation-iteration-count: infinite;
 44         }
 45         .div2{
 46             width: 200px;height: 200px;background-color: #ffc602;
 47             margin-top: 100px;
 48             display: inline-block;
 49  
 50         }
 51         @-webkit-keyframes mycolor{
 52             0%{
 53                 background-color: #ffc602
 54             }
 55             20%{
 56                 background-color: #1363bc;
 57                  -webkit-transform: translateY(-10px);
 58                  height: 210px;
 59             }
 60             40%{
 61                 background-color: #cf0fff;
 62                  -webkit-transform: translateY(-20px);
 63                  height: 220px
 64             }
 65             60%{
 66                 background-color: #810977;
 67                 -webkit-transform: translateY(-30px);
 68                 height: 230px
 69             }
 70             80%{
 71                 background-color: #c91f10;
 72                  -webkit-transform: translateY(-40px);
 73                  height: 240px
 74             }
 75             100%{
 76                 background-color: #ffc602;
 77                  -webkit-transform: translateY(-50px);
 78                  height: 250px
 79             }
 80  
 81         }
 82         .div2:hover{
 83             -webkit-animation-name: mycolor;
 84             -webkit-animation-duration: 1s;
 85         -webkit-animation-timing-function: linear;  
 86             -webkit-animation-iteration-count: infinite;   
 87         }
 88         .div3{
 89             height: 40px;width: 40px;background-color: #08446d;
 90             display: inline-block;
 91         }
 92         .div3:hover{
 93  
 94         }
 95     </style>
 96 </head>
 97 <body>
 98 <div class="div1"></div>
 99 <div class="div2"></div>
100 <div class="div3"></div>
101  
102 </body>
103 </html>

@keyframes(关键帧)作为CSS3动画的一部分，其该紧跟一个标识符(由开发者自定)，此标识符将在其他CSS代码中引用。在@keyframes和标识符之后，就是一系列的动画规则(就像普通的CSS代码中声明的style规则)了。这一系列动画规则用大括号括起来隔开，然后再嵌在@keyframes之后的大括号里，类似其他@语法规则。

 

posted @ 2018-08-20 14:08  一块一  阅读(19337)  评论(0)  编辑  收藏  举报