如何循环播放CSS3过渡？

  • Z时代
  • 2024-01-10
  • 分类：问答

以下样式只是如何在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动画。

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

@keyframes changewidth {
  from {
    width: 100px;
  }
  to {
    width: 300px;
  }
}
div {
  animation-duration: 0.1s;
  animation-name: changewidth;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

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

以上是 如何循环播放CSS3过渡？ 的全部内容， 来源链接： utcz.com/qa/430304.html

回到顶部