• 技术文章 >web前端 >前端问答

    css3动画有执行顺序吗

    长期闲置长期闲置2022-06-14 15:18:03原创191

    css3动画有执行顺序。css中的动画执行顺序是从transform设置最外面的属性开始,语法为“transform:最后执行的动作属性(属性值)...最开始执行的动作属性(属性值);”。当动画中先有偏移动作再有旋转动作时,旋转会根据原来的中心点进行旋转,因此在做动画时需要先变形再偏移。

    本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。

    css3动画有执行顺序吗

    css3动画有执行顺序

    transform动画执⾏的顺序是从最外⾯的属性开始,例如:transform:translateX(100px) rotate(30deg),动画先旋转30度,然后再偏移100像素。

      如果调换过来,transform:rotate(30deg) translateX(100px),动画先偏移100像素,然后再旋转30度,这⾥要注意,先偏移再旋转,旋转时会根据原来位置的中⼼点旋转

    示例如下:

    23.png

    24.png

    所以在做动画的时候,先做其他变形,再做偏移。

    (学习视频分享:css视频教程html视频教程

    以上就是css3动画有执行顺序吗的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:CSS3
    上一篇:jquery和vue中的ajax有什么区别 下一篇:css3边框怎么取消阴影
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• css3怎么实现元素过渡效果• css3怎么实现高度渐变效果• css3单位是什么• css3什么是自适应布局• css3中after的content属性里面都能放什么东西
    1/1

    PHP中文网