如何在循环中播放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; } 

Answer 1

CSS只从一组样式转换到另一组样式; 你在找什么是CSSanimation 。

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

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

看看上面的链接，找出如何自定义它，你必须添加浏览器前缀。