[分享]css3动画连续执行

CSS3动画是让网页变得更生动、更有趣的重要组成部分之一。在CSS3中，动画可以设置多个关键帧，让元素在不同的时间点上运动到不同的位置，从而实现连续的动画效果。在CSS3动画中，我们使用keyfram...

CSS3动画是让网页变得更生动、更有趣的重要组成部分之一。在CSS3中，动画可以设置多个关键帧，让元素在不同的时间点上运动到不同的位置，从而实现连续的动画效果。

在CSS3动画中，我们使用@keyframes规则来定义动画。下面是一个使用@keyframes来定义的简单动画：

 .box {
   animation: myanimation 2s infinite;
 }

 @keyframes myanimation {
   0% { transform: scale(1); }
   50% { transform: scale(1.2); }
   100% { transform: scale(1); }
 } 

这段代码定义了一个class为box的元素，使用了myanimation动画，动画时间为2秒，并且无限循环。在@keyframes中，定义了从0%到100%之间，元素的缩放比例不断变化的动画。当然，你也可以定义其他属性的变化，比如颜色、位置等等。

如果我们想让动画连续执行，我们可以通过animation-iteration-count属性来实现。这个属性的默认值是1，即播放一次。如果我们将其设置为infinite，则可以让动画无限循环执行：

 .box {
   animation: myanimation 2s infinite;
 } 

如果我们想在动画执行完之后再执行另一个动画，可以使用animation-delay属性来设置开始执行的时间。例如，下面的代码表示在box元素执行完myanimation动画之后，延迟1s，再执行另一个动画：

 .box {
   animation: myanimation 2s, anotheranimation 2s 1s;
 } 

这里的逗号表示两个动画都要执行。第一个动画是myanimation，时长为2秒，不需要延迟。第二个动画是anotheranimation，时长为2秒，需要在myanimation执行完后1秒才开始执行。

总之，CSS3动画是实现网页动态效果的一个重要手段。如果你掌握了它，就可以让网页更加生动、更具吸引力。