'CSS animation with delay and opacity

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>
cssanimationopacity


Solution 1:[1]

I had a similar problem, where the requirement was to wait n seconds before fading in different page elements, one after another.

The key to getting this working for me, that isn't mentioned in any of the other answers, is the fact that animation can actually take a list of animations to run. It will start running them simultaneously so you need to insert delays in order to run them sequentially.

My solution was this (in SCSS, but simple enough to write as straight CSS if you need):

@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; }
}

Usage:

h1 {
    @include fade-in('500ms');
}
h2 {
    @include fade-in('700ms');
}

Solution 2:[2]

I'd suggest that you set the opacity of the element to 1 per default (for browsers that do not support animations). Then start the animation at 0s and use the keyframes to delay the animation.

#element{
animation:3s ease 0s normal forwards 1 fadein;
-webkit-animation:3s ease 0s normal forwards 1 fadein;
opacity:1
}

@keyframes fadein{
    0%{opacity:0}
    80%{opacity:0}
    100%{opacity:1}
}

@-webkit-keyframes fadein{
    0%{opacity:0}
    80%{opacity:0}
    100%{opacity:1}
}

http://jsfiddle.net/mg00t86v/2/

Solution 3:[3]

Since all the major browsers support CSS3 animations with the notable exception of IE<10 you could use conditional comments into your HTML like so

<!DOCTYPE html>
<!--[if lte IE 9]><html class="lte-ie9"><![endif]-->
<!--[if (gt IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html><!--<![endif]-->

thus you can add a more specific rule for IE<10 using the .lte-ie9 classname in a specific selector

.lte-ie9 #element {
   opacity: 1;
   filter : alpha(opacity=100);
}

I would not move instead the opacity: 0 inside the first keyframe as a primary suggestion, since this would limit all the animations to have an animation-delay equal to 0 (or otherwise you could see a kind of fouc for the element itself)

Solution 4:[4]

you can try this might be help you.

HTML

<div>some text</div>

CSS

div{
-webkit-animation: fadein 5s linear 1 normal forwards;
 }

@-webkit-keyframes fadein{
from{
   opacity: 0;
}
to{
    opacity: 1;
}
}

Solution 5:[5]

This waits 3 seconds and then slides in from left:

EVEN SHORTER:

.myclass {animation: 4s slidein;}

@keyframes slidein {
0% {opacity:0;
    transform: translateX(-100%);}
92% {opacity:0;
    transform: translateX(-100%);}
100% {opacity:1;
    transform: translateX 0;}
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 MgSam
Solution 2 Raphael Müller
Solution 3
Solution 4 Parth Akbari
Solution 5 Francisco Xavier Carrasco

Related Questions