我一直在为 friend 和家人制作圣诞电子贺卡,其中一部分包括淡入淡出的过渡/动画。我找到了替代解决方案(例如这个: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;}
}
最佳答案
首先你需要给你的 div
height
和 width
因为你使用图像作为背景..此外你真的需要绝对位置吗?如果是,请确定您使用的是 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;
}
如果想要淡入淡出的效果,可以看我的另一个回答here
关于css - 过渡动画淡入淡出的不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14020910/