CSS3的动画需要遵循‘@Keyframes规定
规定动画的时长
规定动画的名称
下面是个例子
在.html文件中
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>动画</title> 6 <link rel="stylesheet" href="style04.css" type="text/css"> 7 </head> 8 <body> 9 <div> 动画效果</div> 10 </body> 11 </html>
在.css文件中
1 div{ 2 100px; 3 height: 100px; 4 background-color: red; 5 position: relative; 6 animation: anim 5s infinite alternate;/* infinite alternate 反复执行动画*/ 7 -webkit-animation: anim 5s infinite alternate; /*Safari 和 Chrome 浏览器*/ 8 } 9 @keyframes anim 10 { 11 0%{ 12 background-color: red; 13 left: 0px; top: 0px; 14 } 15 16 25%{ 17 background-color: blue; 18 left: 200px;top: 0px; 19 } 20 21 50%{ 22 background-color: antiquewhite; 23 left: 200px;top: 200px; 24 } 25 26 75%{ 27 background-color: blueviolet; 28 left: 0px;top: 200px; 29 } 30 31 100%{ 32 background-color: red; 33 left: 0px;top: 0px; 34 } 35 } 36 37 @-webkit-keyframes anim{ 38 0%{ 39 background-color: red; 40 left: 0px; top: 0px; 41 } 42 43 25%{ 44 background-color: blue; 45 left: 200px;top: 0px; 46 } 47 48 50%{ 49 background-color: antiquewhite; 50 left: 200px;top: 200px; 51 } 52 53 75%{ 54 background-color: blueviolet; 55 left: 0px;top: 200px; 56 } 57 58 100%{ 59 background-color: red; 60 left: 0px;top: 0px; 61 } 62 }