css - 1 つの -webkit- アニメーションは機能するが、別のアニメーションは機能しない

Question

これが私のcssコードです。Safari では、2 番目の :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。