CSS3动画在a:hover时的应用

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 fiddle代码示例： http://jsfiddle.net/9jMqc/

当我在a元素中添加class标签时，偏移量会发生显著变化，但动画仍然有效。

- benediktho

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

我认为您之前可能错过了在链接上使用display: block的设置 - 只是作为参考，您不应该在

上使用display: block，因为这是它们的默认设置，除非在CSS中另有声明。

- christian.thomas