css3 动画无限次播放

CSS3动画是现代网站设计中非常重要的一部分，随着越来越多的用户使用移动设备访问网站，动画的使用也越来越广泛。在CSS3中，我们可以使用各种动画效果，比如旋转、变形、淡入淡出、平移等等。其中，动画无限次播放是一个很常用的功能。下面我们就来学习一下如何实现CSS3动画的无限次播放。

    .animation {
        animation: name 2s infinite; // name为动画名称，2s为动画时长，infinite为播放次数
    }
    @keyframes name {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(100%);
        }
    }

在上述代码中，我们使用了CSS3的@keyframes关键字来定义了动画的关键帧，从 0% 到 100% 的过渡效果，使元素平移从左边到右边。.animation为要应用动画的元素，animation属性指定了动画的名称、时长和无限次播放。其中，infinite表示播放次数为无限次。

如果我们想控制动画的播放次数，可以将infinite替换成具体的次数：

    .animation {
        animation: name 2s 5; // 播放5次
    }

通过这种方式，我们可以轻松地实现CSS3动画的无限次播放，并且可以根据需要控制动画的播放次数。希望这篇文章对大家有所帮助！