[分享]css3动画间隔循环执行

CSS3动画中的间隔循环执行非常实用，在实现网站UI效果时经常用到。通过循环执行不同的关键帧，我们可以让元素呈现出起伏或是循环旋转的动画效果。在CSS3中实现间隔循环执行非常简单，只需要在关键帧的名称...

CSS3动画中的间隔循环执行非常实用，在实现网站UI效果时经常用到。通过循环执行不同的关键帧，我们可以让元素呈现出起伏或是循环旋转的动画效果。

在CSS3中实现间隔循环执行非常简单，只需要在关键帧的名称后面加上一个百分比值，就可以控制它被循环执行的次数。

 @keyframes 起伏 {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }

    .box {
        animation: 起伏 1s infinite;
    } 

上面的代码中，我们定义了一个名为“起伏”的关键帧，其中50%的位置使元素向上移动了10像素。我们将这个动画效果应用于类名为“box”的元素上，并设置为无限循环。

除了在关键帧中设置百分比值，我们还可以使用JavaScript动态地设置循环次数：

 var box = document.querySelector('.box');
    box.style.animationIterationCount = '3'; 

上面的代码中，我们把类名为“box”的元素获取到，然后通过设置它的“animationIterationCount”属性，将循环次数设置为3。

总结

通过CSS3动画的间隔循环执行，我们可以轻松实现网站UI效果中常见的动画效果。对于那些需要多次执行同一动画效果的场景，这个属性将会变得更加实用和重要。