CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Elton Jamie
Elton Jamie

Reputation: 584

css animate fadeIn doesn't work in my case

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

I don't want to use opacity 0 and 1 in two different place, that's too redundant for me, so I try to use css animate property. But I coudln't make it work. My code seems ok for me, here are them.

.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;}
}

My js

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

Upvotes: 1

Views: 151

Answers (1)

tomloprod
tomloprod

Reputation: 7862

You forgot the duration for animation. And you need to use @-webkit-keyframes for webkit browsers.

CSS affected: 

.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;}
}

URL: http://jsfiddle.net/9w0v62fa/2/

Upvotes: 2

Related Questions