Delaying CSS animations till the animation's container div is in the viewport

Question

Apologies in advance as this is the first question I've ever posted on here so bear with me. Wondering if anyone can help, I'm not bad with HTML and CSS but have no real skill in jquery or javascript. Anyway I'm working on a customer site and have a set of unordered lists in a container div with CSS animations. It's a one page website so the animations are below the fold. What I'd like to do is delay the animations to start until they are scrolled to by the user. Cheers in advance.

Here's the mark-up:

<div id="processbox">
        <ul class="process" id="pos">
            <li>Generous public open spaces</li>
            <li>Community orchards</li>
            <li>Allotments</li>
        </ul>
        <ul class="process" id="community">
            <li>Land for a community building</li>
            <li>Sports pitches</li>
            <li>Contributions towards community projects</li>
        </ul>
        <ul class="process" id="traffic">
            <li>Traffic calming</li>
            <li>Safe routes to school</li>
        </ul>
            <ul class="process" id="water">
            <li>Sustainable surface water drainage</li>
            <li>Flood prevention</li>
        </ul>
</div>

And the CSS:

.process {
background-color: #3d323e;
color: #efe8dd;
max-width: 698px;
padding-top: 20px;
padding-left: 35px;
padding-right: 30px;
padding-bottom: 20px;
margin-bottom: 10px;
}

#pos.process {
min-height: 60px;
-webkit-animation-name: fullwidth;
-moz-animation-name: fullwidth;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
}

#community.process {
min-height: 60px;
-webkit-animation-name: fullwidth;
-moz-animation-name: fullwidth;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-delay:0.25s;
-webkit-animation-delay:0.25s;
}

#traffic.process {
min-height: 60px;
-webkit-animation-name: fullwidth;
-moz-animation-name: fullwidth;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-delay:0.5s;
-webkit-animation-delay:0.5s;
}

#water.process {
min-height: 60px;
margin-bottom: 0px;
-webkit-animation-name: fullwidth;
-moz-animation-name: fullwidth;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-delay:0.75s;
-webkit-animation-delay:0.75s;
}

@-webkit-keyframes fullwidth {
0% {
width: 0;
opacity: 0.5;
width: 10%;
}
90% {
width: 105%;
}
100% {
width: 100%;
opacity: 1;
}
}

@-moz-keyframes fullwidth {
0% {
width: 0;
opacity: 0.5;
width: 10%;
}
90% {
width: 105%;
}
100% {
width: 100%;
opacity: 1;
}
}

score 0 · Accepted Answer · answered Mar 18 '14 at 13:04

0

I think this demo might be a good start for you:

http://codepen.io/chriscoyier/pen/DjmJe

Another plugin I can recommend is WOW (check it out: http://mynameismatthieu.com/WOW/) It animates your animation when the user scrolls into viewport (in his demo, he is using animate.css, just replace the name with your propery, eg fullWidth)

answered Mar 18 '14 at 13:04

Paranoia

2,040
5
25
27

Thanks I've had a look at the wow plugin and can get animations to fire on scroll without too much difficulty. Unfortunately it clashes with the scrollTo.js script I'm using to navigate the one page format. I'll mark this as answered as it would have worked well for someone not using this script so it may help someone else. – user3433046 Mar 18 '14 at 15:30
One more comment, I managed to get the animation to fire on scroll using this bit of script I found on another question that I hadn't spotted before. Link is below http://stackoverflow.com/questions/16325679/activate-css3-animation-when-the-content-scrolls-into-view – user3433046 Mar 18 '14 at 17:46
Please include the relevant code in the answer itself – Zach Saucier Jul 28 '14 at 16:33

score 0 · Answer 2 · answered Mar 18 '14 at 13:38

not use % if not define width
width not defined twice.

@-webkit-keyframes fullwidth {
0% {
width: 0;
opacity: 0.5;
width: 10%;
}

if the list is short you can use :hover

<style type="text/css">
     .process {
     background-color: #3d323e;
     color: #efe8dd;
     width: 400px;
     max-width: 1000px;
     padding: 20px 30px 10px 35px;
     margin-bottom: 10px;
}

#pos:hover {
       width: 400px;
       -webkit-animation: fullwidth 1s 1 ease;
}
@-webkit-keyframes fullwidth {
     0% {
          opacity: 0.5;
          width: 400px;
     }
     90% {
          width: 1000px;
          opacity: 0.5;
     }
     100% {
          width: 400px;
          opacity: 1;
     }
}
</style>

<div id="processbox">
        <ul class="process" id="pos">
            <li>Generous public open spaces</li>
            <li>Community orchards</li>
            <li>Allotments</li>
        </ul>
</div>

Delaying CSS animations till the animation's container div is in the viewport

2 Answers2