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/）当用户滚动到视口时，它动画你的动画（在他的演示中，他正在使用animate.css，只需用你的名字替换名称，例如 fullWidth ）

Answer 2

如果没有定义%，请不要使用width width未定义两次。

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

如果列表很短，您可以使用: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>

延迟CSS动画直到动画的容器div在视口中

2 个答案: