在CSS3动画中,delay(延迟)是一个非常重要的概念,可以通过它来控制动画的开始时间。
/* 设置动画1延迟1秒后开始 */ .animation1 { animation-delay: 1s; } /* 设置动画2延迟2秒后开始 */ .animation2 { animation-delay: 2s; } /* 设置动画3延迟3秒后开始 */ .animation3 { animation-delay: 3s; }
上面的代码演示了如何通过设置animation-delay属性来控制动画的延迟时间。
值得注意的是,延迟时间必须使用正数表示,单位可以是秒(s)或毫秒(ms),例如:1s或1000ms。
/* 设置动画延迟0.5秒后开始 */ .animation { animation-delay: 0.5s; }
需要注意的是,如果一个元素同时设置了多个动画,那么延迟的时间会相对于每个动画的开始时间来计算。例如:
/* 动画1在2秒后开始,动画2在1秒后开始 */ .box { animation-name: animation1, animation2; animation-delay: 2s, 1s; }
上面的代码演示了如何通过同时设置多个动画来控制它们的延迟时间,注意每个参数的顺序要与animation-name属性对应。
总之,delay是CSS3动画中一个非常实用的概念,可以让我们更加灵活地控制动画的效果和时间。当我们需要让动画有序、连贯地出现时,delay会是一种非常好的解决方案。