如何让我的css3动画保持动画的位置，当它完成动画？ [英] How can I let my css3 animation to stay at its animated position when it finishes animating?

问题描述

可能重复：

Webkit CSS动画问题 - 持续动画的结束状态？

我想保持我的动画div的位置，当它完成运行。现在我在鼠标悬停上为div设置动画，但是div返回到它的位置，即使我仍然悬停在它上面。

I want to keep the position of my animated div when it finishes running. Right now I animating the div on mouse hover, but the div return back to it's position even if I'm still hovering over it.

有一种方法让它回来只有当我老鼠出来吗？

Is there a way to let it get back only when I mouse out?

http://jsfiddle.net/neoswf/X5a64 /

div{
    width:100px;height:100px;margin:1em;background:red
}
div:hover {
  -webkit-animation-name: rotateThis;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function:ease-in-out;
  -webkit-transform: translateZ(0);
}
@-webkit-keyframes rotateThis {
  from { -webkit-transform:scale(1) rotate(0deg); }
  to { -webkit-transform:scale(1.1) rotate(100deg); }
}​

推荐答案

-webkit-animation-fill-mode: forwards;

DEMO

这篇关于如何让我的css3动画保持动画的位置，当它完成动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！