所以我在这里有这个漂亮的CSS动画,我希望它循环.
我几乎没有CSS动画的经验,但遗憾的是没有想法如何做到这一点.
如果有人在这里帮助我,我真的很感激.
谢谢！
使用Javascript
$("#msg").click(function() {
var duration = 1400;
$msg = $(this);
$msg.css("-webkit-transform","scale(2)")
.css("-webkit-transition-timing-function","ease-out")
.css("-webkit-transition-duration",duration + "ms");
setTimeout(function () {
$msg.css("-webkit-transform","scale(1)")
.css("-webkit-transition-timing-function","ease-in")
.css("-webkit-transition-duration",duration + "ms");
},duration);
});
CSS
#msg { font-size: 40pt; font-weight:bold; text-align:center; line-height: 120pt; }
最佳答案
Praveen的解决方案应该更接近您的要求,但我将提供解决方案using CSS3 animations,而不是使用jQuery来设置转换动画. IMO更容易维护和理解：
CSS
@-webkit-keyframes foo {
from {
-webkit-transform:scale(1);
}
to {
-webkit-transform:scale(2);
}
}
然后JS：
$("#msg").click(function() {
var duration = 1400;
$msg = $(this);
//Syntax is: animation-name animation-duration[ animation-timing-function][ animation-delay][ animation-iteration-count][ animation-direction]
$msg.css("animation","foo " + duration + "ms ease infinite alternate");
});
我没有在上面使用可选的animation-delay参数,其余的应该非常简单.具有交替方向的无限迭代计数将无限期地执行动画,将动画方向从(从到)转换为(从到),直到您调用$msg.css(“animation”,“”)来移除动画.
PS. jQuery 1.8将自动为你做JS中的前缀.
当然,你仍然必须在CSS前面加上非webkit浏览器的工作. Prefixr应该这样做.
Fiddle带有前缀CSS.
原文链接：https://www.f2er.com/jquery/428663.html