美文网首页
css3笔记6 动画优化, animate

css3笔记6 动画优化, animate

作者: wudimingwo | 来源:发表于2018-11-14 17:55 被阅读0次
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);
    }
}

相关文章

  • 动画类文章

    css3常用动画+动画库 vue2使用animate css

  • css3笔记6 动画优化, animate

    尽量用transform 因为会减少重排重绘.董老师说, translate3d 会比 translate 的性能...

  • HTML5+CSS3网址/工具记录

    Animate.css——强大的CSS3动画库 https://github.com/animate-css/an...

  • 前端笔记2

    css3的动画和jQuery的animate动画不兼容,所以不能混着用。想用css3的属性,就用transitio...

  • animate.css的使用方法

    animate.css介绍 animate.css是一个跨浏览器的css3动画库 animate.css基础使用 ...

  • 小程序css动画

    Animate.css一款强大的预设css3动画库

  • JavaScript---动画框架

    animate.css animate.css是一个来自国外的CSS3动画库,它预设了抖动(shake)、闪烁(f...

  • animate.css

    animate.css – 齐全的CSS3动画库 演 示 下 载 简介 animate 是一个来自国外的 CSS3...

  • 常用域名

    CSS3动画 地址 https://github.com/daneden/animate.css 常见的HTML效...

  • animate.css

    animate.css animate.css 是提供炫酷,有趣,跨浏览器css3动画的网站,可以在高级项目中使用...

网友评论

      本文标题:css3笔记6 动画优化, animate

      本文链接:https://www.haomeiwen.com/subject/cuyjfqtx.html