animation注意点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.wrap {
/*动画内的属性*/
animation-name:name; /* 动画名称*/
animation-duration: 5s; /*一个动画周期的时长 （0%~100%）或（from~to）*/
/*作用与关键帧的周期而非整个动画周期，
*也就是说每一帧都是ease-in
*而不是整个关键帧周期是ease-in
*/
animation-timing-function: ease-in;
animation-direction: reverse;
/*默认值：normal；
*reverse:反转的是关键帧和animation-timing-function
*alternate:从from关键帧开始到to关键帧，再从to关键帧回到from关键帧
*alternate-reverse：与alternate相反
*/
animation-delay: 2s;/*动画延迟2s后再执行*/
/*********************************************************/
/*只作用于动画内的属性*/
animation-iteration-count: 2;/*动画重复的次数；值：数字或是infinite（无限循环）；重复的是关键帧*/
/*元素在动画外的状态；
*默认值none；
*backwards：from之前（动画开始之前）的状态保持的跟from一致；
*forwards：to之后（动画结束之后）的状态与to的状态保持一致
*both：from之前和to之后分别与from和to保持一致；
*/
animation-fill-mode: backwards;
}
.wrap:hover {/*hover让动画暂停*/
animation-play-state: paused;/*默认值：running；paused：让动画暂停*/
}
@keyframes name{
from{
transform: translateY(-100px);
}
to{
transform: translateY(100px);
}
}