[分享]css3循环播放一组动画

CSS3循环播放一组动画可以通过利用@keyframes关键字来实现。下面是一个简单的示例：

 .box {
      width: 100px;
      height: 100px;
      background-color: #f00;
      animation: spin 2s linear infinite;
    }
    
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    } 

上述代码中，.box元素被设置为一个正方形，并且使用animation属性来应用名为spin的动画。spin动画是一个旋转的动画，在2秒内以线性速度无限循环播放。

@keyframes关键字是定义动画的关键。在上述代码中，spin动画被定义为从0%到100%的旋转效果。初始状态下，.box元素不旋转（0度），接着在100%的状态下，在Y轴方向旋转了360度。这个动画信息会被循环播放。

除了旋转之外，还可以通过修改关键帧的百分比和样式，来创建各种不同的CSS3动画。在实际应用中，可以将多个动画组合在一起，从而设置更多样式的效果。