javascript - css动画淡入在我的情况下不起作用

http://jsfiddle.net/9w0v62fa/1/

我不想在两个不同的地方使用不透明度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');
    });
});

最佳答案

您忘记了动画的duration。而且您需要对Webkit浏览器使用@-webkit-keyframes。

受影响的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/

关于javascript - css动画淡入在我的情况下不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28525834/