Html 如何循环播放 CSS3 过渡？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13309673/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to play CSS3 transitions in a loop?
提问by user1327073
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?
以下样式只是如何在 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;
}
回答by freejosh
CSS transitions only animate from one set of styles to another; what you're looking for is CSS animations.
CSS 过渡仅从一组样式动画到另一组样式；您正在寻找的是CSS 动画。
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.
查看上面的链接以了解如何根据自己的喜好自定义它，并且您必须添加浏览器前缀。
回答by Lucas
If you want to take advantage of the 60FPS smoothness that the "transform" property offers, you can combine the two:
如果您想利用“transform”属性提供的 60FPS 平滑度，您可以将两者结合起来：
@keyframes changewidth {
from {
transform: scaleX(1);
}
to {
transform: scaleX(2);
}
}
div {
animation-duration: 0.1s;
animation-name: changewidth;
animation-iteration-count: infinite;
animation-direction: alternate;
}
More explanation on why transform offers smoother transitions here: https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108
关于为什么变换在这里提供更平滑过渡的更多解释：https: //medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108
