CSS3 Animation是一种不错的方式来制作一些令人惊叹的动画效果的技术。它能够让网页元素在页面上以吸引人的方式移动、旋转或缩放,这样可以为用户带来不同寻常的视觉体验。我们可以通过CSS3的两个属性来控制动画的延迟时间:
.box { animation-name: move; animation-duration: 2s; animation-delay: 1s; /*其他动画属性*/ }
animation-delay属性定义动画何时开始。默认情况下,animation-delay值为0,因此动画会在元素样式被解析后立即开始。但是,如果你将animation-delay设置为某个值,就可以让动画在指定延迟时间后开始。
下面的CSS代码将定义一个2秒的动画,延迟1秒后开始:
.box { animation-name: move; /*定义动画*/ animation-duration: 2s; /*动画周期*/ animation-delay: 1s; /*动画延迟*/ /*其他动画属性*/ }
动画执行的顺序和延迟时间是可以调整的。你可以通过改变animation-delay属性的值来改变动画的延迟时间:
.box1 { animation-delay: 1s; /*动画延迟1秒*/ /*其他动画属性*/ } .box2 { animation-delay: 2s; /*动画延迟2秒*/ /*其他动画属性*/ }
我们可以在多个元素上应用同一个动画名称,从而将它们视为一个动画序列。使用animation-delay属性,我们可以控制这一序列中的每个元素何时开始动画。下面是一个例子:
.box1 { animation-name: move; animation-duration: 2s; animation-delay: 0s; /*其他动画属性*/ } .box2 { animation-name: move; animation-duration: 2s; animation-delay: 1s; /*延迟1秒*/ /*其他动画属性*/ } .box3 { animation-name: move; animation-duration: 2s; animation-delay: 2s; /*延迟2秒*/ /*其他动画属性*/ }
上面的代码将在0、1、2秒延迟后分别应用于.box1、.box2和.box3元素。