1

我一直在为朋友和家人制作圣诞电子贺卡，其中一部分包括过渡/动画的淡入淡出。我找到了替代解决方案（例如这个： 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;}
}
4

1 回答 1

2

首先，当您使用图像作为背景时，您需要给予height和width给您。此外，您真的需要绝对位置吗？div如果是，请确定您使用的是position: relative;容器，这里我也设置了高度和宽度，您可以根据您使用的图像替换它们，也不opacity: 0.0;是必需的，opacity: 0;足够了，我也添加animation-iteration-count:infinite;了无限动画迭代

演示

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

如果您想要淡入淡出效果，则可以在这里查看我的另一个答案

于 2012-12-24T11:44:06.177 回答