Menu
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> 
486
The CSS animation-delay property has the following syntax: animation-delay: [time] | initial | inherit; As you can see, there are three possible values: time, initial, and inherit. The first option is [time], which is the number of seconds or milliseconds before the animation starts.
In the CSS, use the @keyframes rule paired with fadeIn. At 0%, set the opacity to 0. At 100%, set the opacity to 1. This creates the fade-in effect.
CSS Demo: transition-delay A value of 0s (or 0ms ) will begin the transition effect immediately. A positive value will delay the start of the transition effect for the given length of time. A negative value will begin the transition effect immediately, and partway through the effect.
The animation-delay CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation.
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; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
