在完成动画制作后，如何让我的css3动画保持其动画位置？

Question

  

可能重复：
  Webkit CSS Animation issue - persisting the end state of the animation?

我希望在完成运行后保持动画div的位置。现在我在鼠标悬停时动画div，但即使我仍然在它上面盘旋，div也会返回到它的位置。

有没有办法让它只在我鼠标退出时才能回来？

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); }
}​

Answer 1

您正在寻找

-webkit-animation-fill-mode: forwards;

DEMO

Answer 2

使用animation-fill-mode: forwards来保持最终状态：

-webkit-animation-fill-mode: forwards;

http://jsfiddle.net/stjHZ/