如何在循环中播放CSS3过渡？ [英] How to play CSS3 transitions in a loop?

问题描述

以下样式只是一个如何在CSS3中设置转换的示例。有没有一个纯CSS的戏法让这个循环播放？

The following style is just an example of how to set transitions in CSS3. Is there a pure CSS trick to make this play in loop?

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动画。

CSS transitions only animate from one set of styles to another; what you're looking for is CSS animations.

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

You need to define the animation keyframes and apply it to the element:

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

  to {
    width: 300px;
  }
}

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

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

Check out the link above to figure out how to customize it to your liking, and you'll have to add browser prefixes.

这篇关于如何在循环中播放CSS3过渡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！