css - 一个 -webkit- 动画工作，但另一个不是

Question

这是我的CSS代码。在 Safari 中，第二个 :hover 伪类规则工作正常，但不是第一个。在 Chrome/IE 中，它们都可以工作。

我错过了什么吗？它们的设置基本相同...

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

Answer 1

尝试添加display: inline-block到您的.button-participate:after.