如何防止css3动画重置完成后? [英] How to prevent css3 animation reset when finished?
本文介绍了如何防止css3动画重置完成后?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我写了一个css3动画,它只执行一次。动画效果很好,但是当动画完成时它会重置。
< script src =http:/ /code.jquery.com/jquery-1.9.1.min.js\"> ;</script>
< script>
$(function(){
$(#fdiv)。delay(1000).addClass(go);
});
< / script>
< style>
#fdiv {
width:10px;
height:10px;
position:absolute;
margin-left:-5px;
margin-top:-5px;
left:50%;
top:50%;
background-color:red;
}
.go {
-webkit-animation:spinAndZoom 1s 1;
}
@ -webkit-keyframes spinAndZoom {
0%{
width:10px;
height:10px;
margin-left:-5px;
margin-top:-5px;
-webkit-transform:rotateZ(0deg);
}
100%{
width:500px;
height:500px;
margin-left:-250px;
margin-top:-250px;
-webkit-transform:rotateZ(360deg);
}
}
< / style>
< div id =fdiv>
< / div>
这里是 demo 。 Thx!
解决方案
添加 animation-fill-mode:forward;
/ p>
到您的 .go
动画的最后一次迭代完成后,动画的最终关键帧继续应用。
http://css-infos.net/property/-webkit-animation-fill-mode
I write a css3 animation and it is only performed once. The animation works well, but it will reset when the animation finished. How can I avoid this, I want to keep the result instead of reset it.
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$("#fdiv").delay(1000).addClass("go");
});
</script>
<style>
#fdiv{
width: 10px;
height: 10px;
position: absolute;
margin-left: -5px;
margin-top: -5px;
left: 50%;
top: 50%;
background-color: red;
}
.go{
-webkit-animation: spinAndZoom 1s 1;
}
@-webkit-keyframes spinAndZoom {
0% {
width: 10px;
height: 10px;
margin-left: -5px;
margin-top: -5px;
-webkit-transform: rotateZ(0deg);
}
100% {
width: 500px;
height: 500px;
margin-left: -250px;
margin-top: -250px;
-webkit-transform: rotateZ(360deg);
}
}
</style>
<div id="fdiv">
</div>
Here is the demo. Thx!
解决方案
Add animation-fill-mode: forwards;
to your .go
The animation’s final keyframe continues to apply after the final iteration of the animation completes.
http://css-infos.net/property/-webkit-animation-fill-mode
这篇关于如何防止css3动画重置完成后?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文