以下样式只是一个如何在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 animations。
您需要定义动画关键帧并将其应用于元素：
@keyframes changewidth {
from {
width: 100px;
}
to {
width: 300px;
}
}
div {
animation-duration: 0.1s;
animation-name: changewidth;
animation-iteration-count: infinite;
animation-direction: alternate;
}
查看上面的链接，找出如何根据自己的喜好进行自定义，并且您必须添加浏览器前缀。