Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Jaco Kotzee
Jaco Kotzee
Courses Plus Student 20,157 Points

CSS3 - Images doesn't show in IE whilst using CSS3 transitions

CSS3 - Images doesn't show in IE whilst using CSS3 transitions. I do not mind if the animation does not work in IE, but I would at least want the images to display normally in IE. Here is my code below:

HTML:

<div id="bg">
<img class="fadeIn fadeIn-3s fadeIn-Delay-3s" src="images/about-phil.jpg" alt=""></div>

CSS:

#bg {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
padding:0;
margin:0;
background-color: #100f0e;
background-repeat: repeat;}

#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
min-width:50%;
min-height:50%;
padding: 0px;
margin:auto;}

.fadeIn {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
-o-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;
margin-bottom: -10px;}

.fadeIn-3s {
-webkit-animation-duration:3s;
-moz-animation-duration:3s;
-o-animation-duration:3s;
animation-duration:3s;
}
.fadeIn-Delay-3s {
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
-o-animation-delay:1s;
animation-delay:1s;
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

6 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Jacob,

CSS animations are not supported in IE9 and below. The opacity property is supported, however, so that is why you're not seeing the image in IE.

Jaco Kotzee
PLUS
Jaco Kotzee
Courses Plus Student 20,157 Points
Jaco Kotzee
Jaco Kotzee
Courses Plus Student 20,157 Points

Is there anyway around it?

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hey Jacob,

Take a look at this quick Codepen example I created (I only used WebKit prefixes to keep code simple).

I removed the opacity property, and instead, defined it in the @keyframes rule I created:

@-webkit-keyframes fadeIn {
   0% { opacity: 0; }
   100% { opacity: 100%; }
}
Jaco Kotzee
PLUS
Jaco Kotzee
Courses Plus Student 20,157 Points
Jaco Kotzee
Jaco Kotzee
Courses Plus Student 20,157 Points

It almost worked, but not quite.. it starts out with the image at 100% opacity, then suddenly its 0% and fades to 100%.

Jaco Kotzee
PLUS
Jaco Kotzee
Courses Plus Student 20,157 Points
Jaco Kotzee
Jaco Kotzee
Courses Plus Student 20,157 Points

Hi Guil,

Ok I made another plan:

I removed the opacity property in .fade-in and I changed the .fadeIn-Delay-3s properties from1s to 0s, it worked for me. It displays as a normal image in IE and animates in the other browsers.

Thanks a lot for the help though.