![css3多个动画依次执行 |动态替换css中颜色 css3多个动画依次执行 |动态替换css中颜色](https://liuzhongwei2023.oss-cn-shanghai.aliyuncs.com/uploads/wpic/w13721.jpg)
/*定义一个动画组*/ @keyframes group-animation { 0% { opacity: 0; transform: translateX(-100px); } 50% { opacity: 1; transform: translateX(0); } 100% { opacity: 1; transform: translateX(0); } } /*定义多个子动画*/ .child-animation-1 { animation: group-animation 1s 0s forwards; } .child-animation-2 { animation: group-animation 1s 1s forwards; } .child-animation-3 { animation: group-animation 1s 2s forwards; }
首先,在CSS中定义一个动画组,然后在每个子块中定义不同的延迟时间,这样它们就可以依次执行这个动画。使用forwards属性指定动画结束后应该保持的最终状态。
以上就是如何使用CSS3让多个动画依次执行的方法。如果你有更好的实现方式,欢迎分享!