CSS动画延迟(Animation Delay)是指动画开始执行前的等待时间。通过设置animation-delay
属性,可以控制动画在何时开始执行。这对于创建复杂的动画序列或实现特定的视觉效果非常有用。
CSS动画延迟可以通过以下几种方式实现:
style
属性中设置animation-delay
。<head>
部分使用<style>
标签设置。假设有两个子div
,我们希望它们在页面加载后分别延迟1秒和2秒开始动画:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Delay Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
animation: move 2s linear infinite;
}
.box1 {
animation-delay: 1s;
}
.box2 {
animation-delay: 2s;
}
@keyframes move {
0% { transform: translateX(0); }
50% { transform: translateX(200px); }
100% { transform: translateX(0); }
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
</body>
</html>
animation-delay
属性的值是有效的CSS时间值(如1s
、200ms
)。animation
属性已正确设置,并且包含有效的动画名称和关键帧。div
都应用了正确的延迟设置。animation-delay
属性。通过以上方法,可以有效地控制子div
的CSS动画延迟,实现更复杂的动画效果和更好的用户体验。
领取专属 10元无门槛券
手把手带您无忧上云