animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。
每个动画定义中的属性值的顺序很重要：
可以被解析为 <time> 的第一个值被分配给animation-duration，第二个分配给 animation-delay。
顺序(省略animation-)：
duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name
即：
动画周期时长 –> 动画节奏 –> 延迟时间 –> 运行次数 –> 动画方向 –> 第一帧/最后一帧 –> 运行/暂停 –>动画名（@keyframes）
示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style type="text/css"> 9 .content { 10 width: 400px; 11 height: 400px; 12 border: 1px solid seagreen; 13 margin: 30px auto; 14 position: relative; 15 } 16 .box1 { 17 position: absolute; 18 width: 50px; 19 height: 50px; 20 border: 1px solid darkkhaki; 21 background-color: aquamarine; 22 border-radius: 50%; 23 /* duration | timing-function | delay | 24 iteration-count | direction | fill-mode | play-state | name */ 25 animation: 5s ease 1s 3 normal forwards running box1; 26 } 27 @keyframes box1 { 28 from { 29 transform: translate(0,0); 30 } 31 to { 32 transform: translate(350px,350px); 33 } 34 } 35 </style> 36 </head> 37 <body> 38 <div class="content"> 39 <div class="box1"></div> 40 </div> 41 42 </body> 43 </html>
效果如下：
各部分详细定义可以参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/easing-function
