如何讓我的css3動畫在完成動畫時保持其動畫位置？

可能重複：
Webkit CSS Animation issue - persisting the end state of the animation?如何讓我的css3動畫在完成動畫時保持其動畫位置？

我要保持我的動畫div的位置，當它完成運行。現在我用鼠標懸停的方式對div進行動畫處理，但div仍然回到它的位置，即使我仍然懸停在它上面。

有沒有辦法讓它只有當我退出時才能回來？

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

來源

2012-12-20 neoswf