过渡不透明度淡入淡出动画

Question

我一直在为朋友和家人制作一张圣诞电子贺卡，其中部分内容包括淡入淡出过渡/动画。我找到了替代解决方案（例如这个：http://fvsch.com/code/transition-fade/test5.html），但我不知道为什么我现在的代码不起作用 - 动画只是不透明吗？

代码：

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

Answer 1

首先你需要给height和width到您的div为你使用图像作为背景。而且你真的需要绝对位置？如果是的话确定你使用的是一个容器周围的position: relative;，在这里我也设置了一个高度和宽度，你可以根据你使用的图像替换它们，也不需要opacity: 0.0;，opacity: 0;就够了，我也是无限动画迭代

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

添加animation-iteration-count:infinite;如果你想淡入淡出效果，比你可以看看我的另一个答案here