如何循环播放 CSS3 过渡？

以下样式只是如何在 CSS3 中设置过渡的示例。
有没有一个纯 CSS 技巧可以让这个循环播放？

div {
    width:100px;
    height:100px;
    background:red;
    transition:width 0.1s;
    -webkit-transition:width 0.1s; /* Safari and Chrome */
    -moz-transition:width 0.1s; /* Firefox 4 */
    -o-transition:width 0.1s; /* Opera */
    transition:width 0.1s; /* Opera */
}

div:hover {
    width:300px;
}

CSS 仅将动画从一组样式转换为另一组样式；你要找的是CSS 动画 https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations.

您需要定义动画关键帧并将其应用到元素：

@keyframes changewidth {
  from {
    width: 100px;
  }

  to {
    width: 300px;
  }
}

div {
  animation-duration: 0.1s;
  animation-name: changewidth;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

查看上面的链接，了解如何根据您的喜好对其进行自定义，并且您必须添加浏览器前缀。