CODEWITHSUNDEEP
csscss-transitions
Paul Ferris
Paul Ferris

Reputation: 346

Transitioning opacity for a fade in animation

I've been working on a christmas e-card for friends and family, and part of it includes a fade in transition/animation. I've found alternative solutions (such as this one: http://fvsch.com/code/transition-fade/test5.html), but I don't know why the code I have at the moment doesn't work - do animations just not like opacity?

Code: 

#ChristmasTree{
    position:absolute;
    left:750px;
    top:20px;
    background-image:url(http://i.imgur.com/uk7Z3.png);
    opacity:0.0;    
    animation-play-state:running;
    -moz-play-state:running;
    -ms-play-state:running;
    -o-play-state:running;
    -webkit-animation-play-state:running;    
    animation:treeFadeIn 3s;
    -moz-animation:treeFadeIn 3s;
    -ms-animation:treeFadeIn 3s;
    -o-animation:treeFadeIn 3s;
    -webkit-animation:treeFadeIn 3s;
}

@-moz-keyframes treeFadeIn{
    from{opacity:0.0}
    to{opacity:1}
}

@-webkit-keyframes treeFadeIn{
    from{opacity:0.0}
    to{opacity:1}
}

@-o-keyframes treeFadeIn{
    from{opacity:0.0}
    to{opacity:1}
}

@-ms-keyframes treeFadeIn{
    from{opacity:0.0;}
    to{opacity:1;}
}

Upvotes: 1

Views: 625

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157414

First of all you need to give height and width to your div as you are using image as a background.. moreover do you really need position absolute? If yes than be sure you are using a position: relative; container around, also here I've set a height and width, you can replace them according to the image you are using, also opacity: 0.0; is not required, opacity: 0; is enough, also I've added animation-iteration-count:infinite; for infinite animation iteration

Demo

#ChristmasTree {
    position:relative;
    left:250px;
    top:20px;
    height: 200px;
    width: 300px;
    background-image:url(http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif);
    opacity:0.0;    
    animation-play-state:running;
    -moz-play-state:running;
    -ms-play-state:running;
    -o-play-state:running;
    -webkit-animation-play-state:running;    
    animation:treeFadeIn 3s;
    -moz-animation:treeFadeIn 3s;
    -ms-animation:treeFadeIn 3s;
    -o-animation:treeFadeIn 3s;
    -webkit-animation:treeFadeIn 3s;
    animation-iteration-count:infinite;
}

If you want a fade-in fade-out effect, than you can look another answer of mine here

Upvotes: 2

Related Questions