Question

我不想在两个不同的地方使用不透明度0和1，这对我来说太多了，所以我尝试使用css animate属性。但是我没有让它发挥作用。我的代码对我来说似乎没问题，这是他们。

.btn{
    background:blue;
    padding:10px;
    width:110px;
    color:white;
    white-space: nowrap;
}

.icon:before{
    content: url("http://w2.aic.edu/design/32png/imgur.png");
        -webkit-animation:fadeIn;
        animation:fadeIn;

}

@keyframes fadeIn{
    0% {opacity: 0;}
100% {opacity: 1;}
}

我的js

$(function(){
    $('div').click(function(){
        $('div').addClass('icon');
    });
});

Answer 1

您忘记了duration动画。您需要将@-webkit-keyframes用于 webkit浏览器。

受影响的CSS：

.icon:before{
    content: url("http://w2.aic.edu/design/32png/imgur.png");
   -webkit-animation: fadeIn 5s;
    animation: fadeIn 5s;
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
} 
@keyframes fadeIn{
    0% {opacity: 0;}
    100% {opacity: 1;}
}

网址：http://jsfiddle.net/9w0v62fa/2/

动画fadeIn在我的情况下不起作用

1 个答案: