0

Here is my css code. In Safari, the second :hover pseudo-class rule is working properly, but not the first one. In Chrome/IE they both work.

Am I missing something? They're set up basically the same...

@-webkit-keyframes shakeright {
    from {-webkit-transform: translate(0px,0px);}
    to {-webkit-transform: translate(5px,0px);}
}

@-webkit-keyframes hop {
    from {-webkit-transform: translate(0px,0px);}   to {-webkit-transform: translate(0px,-5px);}  
}

@keyframes shakeright {
    from {transform: translate(0px,0px);}   
    to {transform: translate(5px,0px);}  
}       

@keyframes hop {
    from {transform: translate(0px,0px);}   
    to {transform: translate(0px,-5px);}  
}

.userpoints .button-participate:hover:after, .leaderboard .button-participate:hover:after{
    -webkit-animation-name: shakeright;
    -webkit-animation-duration:.2s;
    -webkit-animation-direction:alternate;  
    -webkit-animation-iteration-count:2;

    animation-name: shakeright;
    animation-duration:.2s;
    animation-direction:alternate;  
    animation-iteration-count:2;        
}

.db-userpoints:hover{
    -webkit-animation-name: hop;
    -webkit-animation-duration:.2s;
    -webkit-animation-direction:alternate;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay:0s;
    -webkit-animation-iteration-count:infinite;

    animation-name: hop;
    animation-duration:.2s;
    animation-direction:alternate;
    animation-timing-function:linear;
    animation-delay:0s;
    animation-iteration-count:infinite;
}
user5494847
  • 23
  • 3

1 Answers1

0

Try to add display: inline-block to your .button-participate:after.

max
  • 8,632
  • 3
  • 21
  • 55
  • Thank you, this fixed it. So am I correct in understanding that this is because an inline element cannot be manipulated left and right, but can be manipulated up and down (as in the other 'hop' animation)? And that Chrome and IE overlook this issue? – user5494847 Oct 27 '15 at 20:48
  • You can not transform inline elements. http://stackoverflow.com/questions/14883250/css-transform-doesnt-work-on-inline-elements I do not know why it works on Chrome and IE – max Oct 27 '15 at 20:59