尽量用transform 因为会减少重排重绘.
董老师说, translate3d 会比 translate 的性能高? 因为 硬件加速?
reverse 从100% 移动到 0%
alternate 当次数多次时, 偶数次会反向移动
alternate-reverse 从100% 开始移动, 偶数次方向移动.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.wrapper{
margin: 200px;
animation: move 2s ease 2s alternate 2 ;
}
@keyframes move {
from {
transform: translate(50px,50px);
}
50%{
transform: translate(100px,50px);
}
to{
transform: translate(100px,100px);
}
}
默认位置 translate(0px,0px) 0% 端点1 (50px,50px) 100% 端点2 (100px,100px) animation-fill-mode: none时, 在默认位置等待, 结束后回到默认位置 forwards时,在默认位置等待, 根据alternate 结束位置有可能是 0%,100% 结束后不会到默认位置. backwards时, 在起始位置等待, 在0% 等待(无论是不是reverse) 结束后回到默认位置. both : 相当于 forwards 和 backwards 结合 在起始位置等待,结束时不回到默认位置.
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
.item{
@include base-size(300px,300px,#ff0);
margin: 200px;
position: absolute;
}
.wrapper{
@include base-size(300px,300px,#f00);
margin: 200px;
position: absolute;
animation: move 2s ease 2s alternate infinite;
&:hover{
animation-play-state: paused;
}
}
@keyframes move {
from {
transform: translate(50px,50px);
}
50%{
transform: translate(100px,50px);
}
to{
transform: translate(100px,100px);
}
}
