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

Question

可能重复:
Webkit CSS动画问题 - 持久动画的结束状态？

我希望在完成运行时保持动画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