向後轉動畫動畫

Question

在我的小測試html頁面上，我有4個元素。這些元素在懸停時播放CSS動畫，但我希望當用戶停止在它們上方時動畫會反轉。

-webkit-animation-direction:alternate; 

沒有工作。我目前的代碼如下：

<style> 

div:hover{ 
-webkit-animation: animationFrames ease 1s; 
-webkit-animation-iteration-count: 1; 
-webkit-transform-origin: 0% 0%; 
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
-webkit-animation-direction:alternate; 
} 

@-webkit-keyframes animationFrames { 
0% { 

opacity:1; 
-webkit-transform: rotate(0deg) scaleX(1) scaleY(1) ; 
} 
20% { 
-webkit-transform: rotate(60deg) ; 

} 
40% { 
-webkit-transform: rotate(40deg) ; 

} 
60% { 
-webkit-transform: rotate(54deg) ; 
} 
80% { 
-webkit-transform: rotate(42deg) ; 

} 
100% { 

opacity:1; 
-webkit-transform: rotate(46deg) scaleX(1) scaleY(1) ; 
} 
} 

.testje1 
{ 
background: black; 
width:48px; 
height:20px; 

position:absolute; 
left:200px; 
top:200px; 
} 

.testje2 
{ 
background: black; 
width:48px; 
height:20px; 


position:absolute; 
left:300px; 
top:200px; 
} 

.testje3 
{ 
background: black; 
width:48px; 
height:20px; 


position:absolute; 
left:400px; 
top:200px; 
} 

.testje4 
{ 
background: black; 
width:48px; 
height:20px; 

position:absolute; 
left:500px; 
top:200px; 
} 

p 
{ 
position:absolute; 
top:-14; 
left:2; 
color:white; 
} 
</style> 

<a href="http://www.redrumbureau.com" target="_blank" > 
<div class="testje1"><p>home</p></div> 
</a> 

<a href="http://www.redrumbureau.com/work" target="_blank"> 
<div class="testje2"><p>home</p></div> 
</a> 

<a href="http://www.redrumbureau.com/clients" target="_blank"> 
<div class="testje3"><p>clients</p></div> 
</a> 

<a href="http://www.redrumbureau.com/about" target="_blank"> 
<div class="testje4"><p>about</p></div> 
</a> 

所有幫助非常感謝！

Answer 1

使用reverse，使動畫走「倒退」：

-webkit-animation-direction:reverse; 

通過CSS技巧這裏有keyframes一個不錯的詳細教程，如果你想了解更多關於提供給您的選項。