如何在循环中播放CSS3过渡？

Question

以下样式只是如何在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;
}

Answer 1

CSS仅将一组样式的动画转换为另一种样式; 您正在寻找的是CSS动画.

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

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

  to {
    width: 300px;
  }
}

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

查看上面的链接,找出如何根据自己的喜好自定义它,并且您必须添加浏览器前缀.

Answer 2

如果您想利用“转换”属性提供的 60FPS 平滑度，您可以将两者结合起来：

@keyframes changewidth {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(2);
  }
}

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

关于为什么变换在这里提供更平滑过渡的更多解释：https : //medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108