@-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之后的大括号里，类似其他@语法规则。