具有延迟和不透明度的CSS动画 [英] CSS animation with delay and opacity
问题描述
我正在尝试使用CSS动画在2秒后淡入一个元素.该代码在新的浏览器中效果很好，但是在旧的浏览器中，由于"opacity:0&"，该元素将保持隐藏状态.
I am trying to fade in an element after 2 sec using CSS animation. The code works great in new browsers, but in old browsers the element will stay hidden because of "opacity:0".
我希望它在旧的浏览器中可见，并且我不想涉及javascript.可以使用CSS解决吗?例如.如何定位不支持动画的浏览器?
I want it to be visible in old browsers and I don't want to involve javascript. Can it be solved using CSS? Eg. some how target browsers that doesn't support animation?
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>
推荐答案
仅不要在元素本身上设置初始的 opacity ，而是在 @keyframes 中进行设置:
Just don't set the initial opacity on the element itself, set it within the @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秒钟的效果.
This technique takes the delay off of the animation, so that it starts running immediately. However, the opacity won't really change until about 66% into the animation. Because the animation runs for 3 seconds, it gives the effect of a delay for 2 seconds and fade in for 1 second.
在此处查看工作示例: https://jsfiddle.net/75mhnaLt/
See working example here: https://jsfiddle.net/75mhnaLt/
您可能还希望对旧版浏览器使用条件注释；IE8和IE9.
You might also want to look at using conditional comments for older browsers; IE8 and 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]-->
然后您可以执行以下操作:
You could then do something like:
.lt-ie9 #element {
opacity: 1;
}
这篇关于具有延迟和不透明度的CSS动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
