jquery - 延迟 CSS 动画直到动画的容器 div 在视口(viewport)中

Question

提前致歉，因为这是我在这里发布的第一个问题，请多多包涵。想知道是否有人可以提供帮助，我对 HTML 和 CSS 还不错，但在 jquery 或 javascript 方面没有真正的技能。无论如何，我在客户网站上工作，并且在带有 CSS 动画的容器 div 中有一组无序列表。这是一个单页网站，因此动画位于首屏之下。我想做的是延迟动画开始，直到它们被用户滚动到。提前干杯。

这是标记:

<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>

还有 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;
}
}

Answer 1

我认为这个演示对您来说可能是一个好的开始:

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

我可以推荐的另一个插件是 WOW(查看:http://mynameismatthieu.com/WOW/)它会在用户滚动到视口(viewport)时为您的动画设置动画(在他的演示中，他使用的是 animate.css，只需将名称替换为您的属性，例如全宽)