Question

I’m new to CSS and now facing a problem which I can’t get rid of.
I made an animation using css3 keyframes. This animation simply changes the rotation of an image whenever someone hovers it. Now I wanted to link this image to a website, but the way I did it, the animation doesn’t run at all.

<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 for you:
http://jsfiddle.net/9jMqc/

When i add the class tag into the a-element, the offset changes dramatically but the animation works.

Answer 1

I’d propose moving the events onto the <a> link, so moving them as per 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; 
}

I think you were perhaps missing display: block on the <a> link previously – Just for reference, you shouldn’t need to use display: block on <div></div>‘s as that’s their default unless otherwise declared in your CSS.