本文目录一览：
如何用css设置animation-delay延迟效果
多个动画的延迟设置若元素有多个动画，可通过逗号分隔分别设置延迟时间。
使用animation动画属性，最重要的就是配合有“关键帧”——@keyframes 样式设置如下：这样的设置，就是将1s分为3帧，每帧显示不同的背景颜色，然后动画效果只显示1次。 注意动画执行完成之后，就恢复元素原来定义的样式设置，如果原来没有这个样式的定义，那也是动画执行完成后恢复没有的状态。
动画的设置通过`animation`属性实现，包括动画名称、持续时间（如3秒、0.4秒），以及延迟、播放次数、开始和结束状态等。例如，`animation-name： test-animation；`用于指定动画名称，`animation-duration： 3s；`指定了动画播放时长。
@keyframes规则。from{属性：值；} to{属性：值；}。0%{属性：值；} 100%{属性：值；}0% 是动画的开始，100% 是动画的完成。可以在二者之间加入25%，50%等。将动画绑定到选择器：在样式中，设置动画属性animation，自定义动画名称和时长。
需要注意的是animation-delay元素依旧会显示，下图只是做一个基本的演示，完整效果可以看另一篇文章写的案例，是完全通过延迟DOM来实现的。
本文来自作者[止云泽]投稿，不代表乘龙号立场，如若转载，请注明出处：https://www.cdyqh.com/miao/33829.html
评论列表（4条）
我是乘龙号的签约作者“止云泽”！
希望本篇文章《【css动画animation,css动画animation和transition】》能对你有所帮助！
本站[乘龙号]内容主要涵盖：乘龙号,生活百科,小常识,生活小窍门,百科大全,经验网
本文概览：本文目录一览：1、如何用css设置animation-delay延迟效果如何用css设置animation-delay延迟效果多...