CSS动画：多动画同步播放或非同步播放

前言 本篇在讲什么 在CSS样式表现动画的基础上的拓展 本篇适合什么 适合初学H5的小白 适合初学CSS的小白 适合入门的前端程序 本篇需要什么 对Html和css语法有简单认知 Node.js(博主v18.13.0)的开发环境 Npm(博主v8.19.3)的开发环境 依赖VS code编辑器 本篇的特色 具有全流程的图文教学 重实践，轻理论，快速上手 提供全流程的源码内容

---

★提高阅读体验★ ♠ 一级标题 ♥ 二级标题 ♣ 三级标题 ♦ 四级标题

---

---

♠ 多动画同时播放

最近有点需求，需要对页面上一个组件同时去播放很多种动画、透明缩放之类的，所以就在之前的基础上多补充一些东西，对动画播放还不清楚的请跳转前文

CSS动画：transition触发动画和animation非触发动画

---

♥ 同步播放多个动画

我们先看看效果,让一个按钮同时旋转、缩放、透明度变化

我们在看一下完整代码

    
    
    
    

    


    

        "btn">测试按钮
    

相当简单的一部分代码，我们挑重点来讲

• 使用@keyframes声明关键帧动画
• 在关键帧内部设置进度0%、100%
• 在进度内部设置对应的属性变换opacity、scale、rotate

这样子写没问题，但是缺点就是所有的动画都是同步播放的，如果想让其中一种变换延迟或者时间改变是没有办法的

---

♥ 非同步播放

现在我们有个需求，依旧是对按钮设置动画，只不过在第一遍出现的时候按钮不会旋转，我们依旧先看一下效果

我们在看一下修改过后的代码

    
    
    
    

    


    
"main">
        "btn">测试按钮
    

相比于上一版的代码，我们稍作了修改，很显然再把同一部分的动画代码写在一个@keyframes内已经不合适了

我们针对btn的父组件main执行了动画test2，并延时了1s播放，动画仅执行旋转效果

我们针对btn的自身执行了动画test1，动画执行缩放和透明度变化

如此一来我们就实现了非同步播放的效果，由此拓展可以达到多种的播放效果

---

♠ 推送

• Github

https://github.com/KingSun5

---

♠ 结语

若是觉得博主的文章写的不错，不妨关注一下博主，点赞一下博文，另博主能力有限，若文中有出现什么错误的地方，欢迎各位评论指摘。

本文属于原创文章，转载请评论留言，并在转载文章头部著名作者出处