random1 Posted October 19, 2012 Share Posted October 19, 2012 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 More sharing options...
random1 Posted October 19, 2012 Author Share Posted October 19, 2012 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 More sharing options...
Guber-X Posted October 23, 2012 Share Posted October 23, 2012 IE does not support the CSS3 Transitions. Reference from http://www.w3schools.com/css3/css3_transitions.asp Link to comment https://forums.phpfreaks.com/topic/269658-css3-fade-in-a-div/#findComment-1387101 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.