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

Posted by Dalibor Zvecevic
Dalibor Zvecevic
Courses Plus Student 41 Points

Delay animation

Hey guys....

I have a question for you...

I'm trying to have list elements fade in one after each other, I use this code to do animations when elements come into viewport, and it work nicely, but I can't figure out how to delay each next element. simple "animation-delay: 1s" is not working because element will be shown and and then faded in again. I tried adding visibility: none to all "li" classes where I have setup "animation-delay" but that is not working either...

Here is CSS:

    .slideDown{
        animation-name: slideDown;
        -webkit-animation-name: slideDown;  

        animation-duration: 1s; 
        -webkit-animation-duration: 1s;

        animation-timing-function: ease;    
        -webkit-animation-timing-function: ease;

        visibility: visible !important;
    }

Javascript to call it:

$(window).scroll(function() { $('.animateme-slideDown').each(function(){ var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop(); if (imagePos < topOfWindow+650) { $(this).addClass("slideDown"); } }); });

        <ul class="areas">
            <li class=" animateme-slideDown hideme">
                <img src="images/areas-fitness@2x.png" alt="" class="icon">
                <h4>Fitness</h4>
                <p>Cardiovascular and muscle health even if you’re not a gym rat.</p>
            </li>
            <li class=" animateme-slideDown speed1 hideme">
                <img src="images/areas-mindfulness@2x.png" alt="" class="icon">
                <h4>Mindfulness</h4>
                <p>A calm and present mind is critical to being happy and productive.</p>
            </li>
            <li class=" animateme-slideDown speed2 hideme">
                <img src="images/areas-eating@2x.png" alt="" class="icon">
                <h4>Healthy Eating</h4>
                <p>What you eat and drink strongly determines your well-being.</p>
            </li>
            <li class=" animateme-slideDown speed3 hideme">
                <img src="images/areas-community@2x.png" alt="" class="icon">
                <h4>Community</h4>
                <p>Volunteering in the community ripples back in waves of good karma.</p>
            </li>
        </ul>