具有延迟和不透明度的 CSS 动画 [英] CSS animation with delay and opacity
问题描述
我正在尝试使用 CSS 动画在 2 秒后淡入元素.该代码在新浏览器中运行良好，但在旧浏览器中，由于opacity:0"，该元素将保持隐藏状态.
我希望它在旧浏览器中可见，我不想涉及 javascript.可以用CSS解决吗?例如.一些如何定位不支持动画的浏览器?
CSS:
#element{动画:1 秒缓动 2 秒正常前进 1 淡入；-webkit-animation:1s 缓解 2s 正常前进 1 淡入；不透明度:0}@keyframes 淡入{from{opacity:0}到{不透明度:1}}@-webkit-keyframes 淡入{from{opacity:0}到{不透明度:1}}HTML:
som content不要在元素本身上设置初始 opacity，而是在 @keyframes 中设置它:
#element{-webkit-animation:3s 缓动 0s 正常前进 1 淡入；动画:3s 缓动 0s 正常前进 1 淡入；}@关键帧淡入{0% { 不透明度:0;}66% { 不透明度:0;}100% { 不透明度:1;}}@-webkit-keyframes 淡入{0% { 不透明度:0;}66% { 不透明度:0;}100% { 不透明度:1;}}此技术消除了动画的延迟，使其立即开始运行.然而，直到动画中的 66% 左右，不透明度才会真正改变.因为动画运行了3秒，所以给出了延迟2秒、淡入1秒的效果.
在此处查看工作示例:https://jsfiddle.net/75mhnaLt/
您可能还想考虑对旧浏览器使用条件注释；IE8 和 IE9.
HTML 中的类似内容:
<!--[如果是 IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en-GB"><![endif]--><!--[如果 IE 7]><html class="no-js lt-ie9 lt-ie8 ie-7" lang="en-GB"><![endif]--><!--[如果 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 {不透明度:1；}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".
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>
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; }
}
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.
See working example here: https://jsfiddle.net/75mhnaLt/
You might also want to look at using conditional comments for older browsers; IE8 and IE9.
Something like the following in your 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屋！
