如何在循环中播放CSS3过渡? [英] How to play CSS3 transitions in a loop?
本文介绍了如何在循环中播放CSS3过渡?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
以下样式只是一个如何在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屋!
查看全文