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。

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

1 个答案: