use*_*110 17 css animation opacity
我试图使用CSS动画在2秒后淡入一个元素.该代码在新浏览器中运行良好,但在旧浏览器中,由于"不透明度:0",该元素将保持隐藏状态.
我希望它在旧的浏览器中可见,我不想让它发送javascript.可以用CSS解决吗？例如.一些目标浏览器如何不支持动画？
CSS:
#element{
animation:1s ease 2s normal forwards 1 fadein;
-webkit-animation:1s ease 2s normal forwards 1 fadein;
opacity:0
}
@keyframes fadein{from{opacity:0}
to{opacity:1}
}
@-webkit-keyframes fadein{from{opacity:0}
to{opacity:1}
}
HTML:
<div id=element>som content</div>
Mic*_*umo 42
只是不要opacity在元素本身上设置初始值,将其设置在@keyframes:
#element{
-webkit-animation: 3s ease 0s normal forwards 1 fadein;
animation: 3s ease 0s normal forwards 1 fadein;
}
@keyframes fadein{
0% { opacity:0; }
66% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes fadein{
0% { opacity:0; }
66% { opacity:0; }
100% { opacity:1; }
}
此技术将动画延迟,以便立即开始运行.但是,在动画中大约66%之前,不透明度不会真正改变.因为动画运行3秒钟,它会产生延迟2秒的效果并淡入1秒钟.
请参阅此处的工作示例:https://jsfiddle.net/75mhnaLt/
您可能还想查看对旧版浏览器使用条件注释; IE8和IE9.
您的HTML中的内容如下:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en-GB"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8 ie-7" lang="en-GB"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9 ie-8" lang="en-GB"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en-GB"> <!--<![endif]-->
然后你可以这样做:
.lt-ie9 #element {
opacity: 1;
}
我遇到了类似的问题，要求是等待n几秒钟，然后再逐渐淡入不同的页面元素。
让这个为我工作的关键是，在任何其他答案中都没有提到，事实上它animation实际上可以运行一个动画列表。它将开始同时运行它们，因此您需要插入延迟才能按顺序运行它们。
我的解决方案是这样的（在 SCSS 中，但如果需要的话，足够简单，可以直接编写为 CSS）：
@mixin fade-in($waitTime) {
animation:
wait #{$waitTime},
fade-in 800ms #{$waitTime};
}
@keyframes wait {
0% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
用法：
h1 {
@include fade-in('500ms');
}
h2 {
@include fade-in('700ms');
}