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

CSS

Zandy Rox
Zandy Rox
3,982 Points
Posted by Zandy Rox
Zandy Rox
3,982 Points

Crossfading in CSS

I've been looking for the code (that actually works) to cross fade from one image to another. I have 4 images in HTML that I wish to crossfade and I just can't seem to get the code right. Can you please advise?

  <div id="dashimage" class="animated">
 <img class="first" src="http://www.losangeles-shop.com/images/front_slideshow/Rodeo_Via_View.jpg" alt="Los Angeles"/>
 <img class="second" src="http://imagesus.homeaway.co.uk/mda01/2b4c2550-4519-4150-89ea-7dab669d13f7.1.6" alt="Venice Beach"/> 
 <img class="third" src="http://www.theflightdeal.com/wp-content/uploads/2014/09/san_francisco_september-550x366.jpg" alt="Golden Gate"/>
 <img class="fourth" src="http://d1kcl3yiuixneo.cloudfront.net/wp-content/uploads/sunset-lake-tahoe.jpg" alt="Lake Tahoe">
    </div>

5 Answers

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Ok Zandy i created an example for you to have a go and tweak as needed.

<html>
    <head>
        <title>Fade In Out example</title>
        <style>

            img{
                position: absolute;
                top:0;
                left:0;
            }

            img:nth-of-type(1){
                 -webkit-animation: fadeInOut 10s linear 6s infinite;
            }
            img:nth-of-type(2){
                 -webkit-animation: fadeInOut 10s linear 4s infinite;
            }
            img:nth-of-type(3){
                 -webkit-animation: fadeInOut 10s linear 2s infinite;
            }
            img:nth-of-type(4){
                 -webkit-animation: fadeInOut 10s linear infinite;
            }

/*  Keyframes - WebKit only ------------------------------------------ */


            @-webkit-keyframes fadeInOut{

            0% { opacity:1; } 
            17% { opacity:1; } 
            25% { opacity:0; } 
            92% { opacity:0; } 
            100% { opacity:1; }

            }


        </style>
    </head>

    <body>


        <img src='1.png'>
        <img src='11.png'>
        <img src='21.png'>
        <img src='31.png'>




    </body>
</html>

Remember to replace the img src with your own. the images appear all on top of each other so you can see the effect more clearly.

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Hi Zandy,

Could you please post your css, we cannot help you without seeing what you are trying to do.

Zandy Rox
Zandy Rox
3,982 Points
Zandy Rox
Zandy Rox
3,982 Points

In the time I was awaiting a response I did learn this; however, I need further assistance with the keyframes rule. I'm reading about it on Mozilla Developer Network and I'm afraid its going a little over my head.

@keyframes cf4FadeInOut { 0% { opacity:1; } 17% { opacity:1; } 25% { opacity:0; } 92% { opacity:0; } 100% { opacity:1; } }

dashimage img:nth-of-type(1) {

animation-delay: 6s; }

dashimage img:nth-of-type(2) {

animation-delay: 4s; }

dashimage img:nth-of-type(3) {

animation-delay: 2s; }

dashimage img:nth-of-type(4) {

animation-delay: 0; }

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

So this is what happening:

All images are using the same animation but with different start times, the fourth image animation starts immediately "dashimage img:nth-of-type(4)", the third image animation starts 2 seconds after that, the second 4 seconds and the first 6 seconds.

Now the animation cf4FadeINOUT has a duration, lets say its 10 seconds. The keyframes act as points in time where a rule will have a certain value.

So 0% -> 0 seconds into the timeline, the opacity value is 1, which means the image is fully visible.

At 17% -> 1.7 seconds in, the opacity is 0, so from 0 seconds to 1.7 seconds you see the first image fading out. 2 seconds in the second image starts animating the same way and so forth.

Zandy Rox
Zandy Rox
3,982 Points
Zandy Rox
Zandy Rox
3,982 Points

Great! So I'm on the right track, right. . .?

I need to also figure out "cf4FadeINOUT" (I pulled this from some website) so I had to translate into my classes/ids. I've inserted my code, but of course nothing's happening....so close, yet so far....

I made "cf4FadeINOUT" into #dashimage....but nothings happened yet...

Zandy Rox
Zandy Rox
3,982 Points
Zandy Rox
Zandy Rox
3,982 Points

Thanks so much!! It worked!