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

General Discussion

Posted by Catherine Millington
Catherine Millington
3,754 Points

CSS animation picture slideshow

I have made a slideshow with keyframes and animation properties, changing the background image of a div over a percentage of time with fading in and out opacity. It works really well in all the browsers I've checked but won't in IE. Any ideas?

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Could you add it to codepen/github and would be able to inspect the code. Unless your not ready to share. Have you checked [caniuse](caniuse.com) for any issues with IE.

5 Answers

Catherine Millington
Catherine Millington
3,754 Points
Catherine Millington
Catherine Millington
3,754 Points

Hi, thanks so much for coming back to me. I have had a look on caniuse and it seems as though animations are supported on IE. I have created a workspace, can you see that or is it better to use codepen?

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Your welcome. Think the WorkSpace is relevant to each user. Codepen would be simpler and it's free.

Catherine Millington
Catherine Millington
3,754 Points
Catherine Millington
Catherine Millington
3,754 Points

Here is the codepen link; http://codepen.io/Cmilli/pen/KsnGI/

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Wicked! Just turning in for the evening but I assure you I will investigate in the morning and get back to you with some advice on how to rectify this issue.

Adam Sackfield
PLUS
Adam Sackfield
Courses Plus Student 19,663 Points
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Decided to have a look before bed, and figured it out here is a simplified pen based on yours. Now the I have removed the image links and shortened the animation just to make it easier for me to work with. The problem is the part below

    .slideshow{-animation:slideshow 20s  linear alternate infinite; } // You have a rogue "-" before the word animation.

also you can consolidate two rules here into this

    .slideshow {
        animation:slideshow 20s  linear alternate infinite; 
        -webkit-animation:slideshow 20s  linear alternate infinite; 
    }

Hope this is clear for you. Let me know if you have any other issues. I tested in latest IE.

Catherine Millington
Catherine Millington
3,754 Points
Catherine Millington
Catherine Millington
3,754 Points

Thanks Adam! I will have a look at this. Thanks for your time and having a look last night. I'll give your suggestion a whirl.

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Great let me know how it goes.

Catherine Millington
Catherine Millington
3,754 Points
Catherine Millington
Catherine Millington
3,754 Points

Hi Adam, I've still not managed to get the slideshow working in IE which is super annoying. I'll put the css on the codepen again. If you get a sec to have a look it would be great. Here's the website so you can see what i mean about the slideshow; www.thelunesdale.co.uk

Many thanks for your time.