[分享]css3控制动画开始

CSS3提供了多种方式来控制动画开始的时间和条件。以下是一些可以用于控制CSS3动画开始的属性：

animation-delay: 2s;
animation-fill-mode: forwards;
animation-play-state: paused;
animation-direction: reverse; 

animation-delay

animation-delay属性用于推迟动画的开始时间。通过指定一个值，可以让动画在元素加载后的一段时间后再开始运行。例如，animation-delay: 2s;会在元素加载后2秒开始动画。

animation-fill-mode

animation-fill-mode使你能够控制在动画完成之前和之后元素的样式如何呈现。使用该属性可以forcewards表示动画完成后保留最终状态的值。通过animation-fill-mode: forwards;属性设置该值。

animation-play-state

animation-play-state属性用于暂停或继续CSS3动画。通过设置animation-play-state属性为paused，可以暂停动画在任何时候。例如，animation-play-state: paused;可以在动画开始后立即停止动画。

animation-direction

使用animation-direction属性可以控制CSS3动画的播放方向。该属性可指定元素向前播放或反向播放。通过animation-direction: reverse;属性设置该值。