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
标签：function,动画,顺序,count,delay,案例,animation,duration From： https://www.cnblogs.com/zry123/p/16976547.html