css animate fadeIn'对我来说不起作用

css animate fadeIn doesn't work in my case

本文关键字：对我来说 不起作用 animate fadeIn css      更新时间：2023-11-04

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-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/

相关文章：