CSS3動畫上：懸停

Question

我是新來的CSS，現在面臨一個我無法擺脫的問題。 我用css3關鍵幀製作了一個動畫。只要有人將它懸停，此動畫只會改變圖像的旋轉。現在我想把這個圖像鏈接到一個網站，但是我做到這一點，動畫根本不運行。

<div class="tunein"><a href="http://www.google.com/"> 
<img src="https://www.google.com/images/srpr/logo3w.png"></a></div> 

.tunein{  
    position: absolute; 
    top: 40%; 
    left: 10%;  
    display: block; 
    -webkit-transform:rotate(12deg); 
    -moz-transform:rotate(12deg); 
} 

.tunein a:hover{ 
    animation: rotate 0.5s ease-out; 
    -moz-animation:rotate 0.5s ease-out; 
    -webkit-animation:rotate 0.5s ease-out; 
} 

JS搗鼓你： http://jsfiddle.net/9jMqc/

當我添加類標記成一個元素，極大地偏移的變化，但在動畫作品。

Answer 1

我提出事件移動到<a>鏈接，所以移動它們按http://jsfiddle.net/9jMqc/2/

.tunein a { 
    display: block; 
    -webkit-transform:rotate(12deg); 
    -moz-transform:rotate(12deg);   
} 

.tunein a:hover{ 
    animation: rotate 0.5s ease-out; 
    -moz-animation:rotate 0.5s ease-out; 
    -webkit-animation:rotate 0.5s ease-out; 
} 

我想你也許<a>鏈接失蹤display: block以前 - 僅供參考，你不應該需要在<div></div>上使用display: block，因爲這是它們的默認值，除非在CSS中另行聲明。