Jump to content

Css3 Fade In A Div


random1

Recommended Posts

I'm trying to fade in a div using CSS3 only. The CSS code I currently have written is:

 

@-webkit-keyframes FadeIn
{
0%
{
 opacity:0;
}
100%
{
 opacity:1;
}
}
#example
{
-webkit-animation-name:FadeIn;
-webkit-animation-timing-function:ease-in;
-webkit-animation-duration:2s;
}

 

This fades works in Google Chrome but not in Firefox, Internet Explorer or Opera (as I expect).

 

How can expand on this code using CSS3 code to support Firefox, Internet Explorer and Opera etc?

Link to comment
https://forums.phpfreaks.com/topic/269658-css3-fade-in-a-div/
Share on other sites

Update:

 

After more work and research I have the code:

 

@-webkit-keyframes FadeIn
{
   0%
   {
    opacity:0;
   }
   100%
  {
    opacity:1;
   }
}
@-webkit-keyframes FadeOut
{
   0%
   {
    opacity:1;
   }
   100%
  {
    opacity:0;
   }
}
@-moz-keyframes FadeIn
{
 from { opacity:0; } to { opacity:1; }
}
@-moz-keyframes FadeOut
{
 from { opacity:1; } to { opacity:0; }
}
@-o-keyframes FadeIn
{
 from { opacity:0; } to { opacity:1; }
}
@-o-keyframes FadeOut
{
 from { opacity:1; } to { opacity:0; }
}
@keyframes FadeIn
{
 from { opacity:0; } to { opacity:1; }
}
@keyframes FadeOut
{
 from { opacity:1; } to { opacity:0; }
}
#example
{
-webkit-animation:FadeIn ease-in 0.5s;
-moz-animation:FadeIn ease-in 0.5s;
-o-animation:FadeIn ease-in 0.5s;
animation:FadeIn ease-in 0.5s;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}

 

and its working all but Internet Explorer. Any advice?

Link to comment
https://forums.phpfreaks.com/topic/269658-css3-fade-in-a-div/#findComment-1386220
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.