在CSS3中,你可以使用animation-delay
属性来对动画进行延时操作。这个属性定义了在动画开始之前的延迟时间。
以下是一个简单的例子:
/* 定义一个名为 "example" 的动画 */
@keyframes example {
0% {background-color: red;}
100% {background-color: yellow;}
}
/* 将动画应用到某个元素,并设置延迟 */
div {
width: 100px;
height: 100px;
background-color: red;
/* 指定动画名 */
animation-name: example;
/* 指定动画完成一个周期所需时间 */
animation-duration: 4s;
/* 设置动画延迟2秒开始 */
animation-delay: 2s;
/* 设置动画循环次数,infinite表示无限次 */
animation-iteration-count: infinite;
}
在这个例子中,div
元素的背景颜色会在动画开始后4秒内从红色变为黄色。但是,由于我们设置了animation-delay: 2s;
,所以动画会在开始之前延迟2秒。
你也可以将多个动画属性合并到一个animation
属性中,如下所示:
div {
width: 100px;
height: 100px;
background-color: red;
/* 合并动画属性 */
animation: example 4s infinite 2s;
}
在这个例子中,animation
属性的值依次表示动画名、动画持续时间、动画循环次数和动画延迟时间。