css3笔记6 动画优化, animate

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);
    }
}