image.png
image.png
image.png
尽量用transform 因为会减少重排重绘.
董老师说, translate3d 会比 translate 的性能高? 因为 硬件加速?
image.png
image.png
reverse 从100% 移动到 0%
alternate 当次数多次时, 偶数次会反向移动
alternate-reverse 从100% 开始移动, 偶数次方向移动.
.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 结合
在起始位置等待,结束时不回到默认位置.
image.png
image.png
.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);
}
}
