小编Amp*_*and的帖子

我想从暂停的CSS动画开始,然后使用jQuery运行动画一秒钟,然后再次暂停.

css如下:

#animation {
  -webkit-animation: one 5s infinite;
  -webkit-animation-play-state: paused;
}

@-webkit-keyframes one {
  0% { .... }
  .....
  100% { .... }
}

它有一些复杂的关键帧,目的是它会在1秒内播放到20%的位置然后停止.

我尝试了下面的jQuery,但它不起作用:

 $("#click").click(function(){
     $("#animation").css("-webkit-animation-play-state", "running").delay(1000).css("-webkit-animation-play-state", "paused");          
 });

(#click是我想用作动画触发器的div)

如果我删除延迟和后续暂停它工作正常但显然继续循环.

例如:

 $("#click").click(function(){
     $("#animation").css("-webkit-animation-play-state", "running");            
 });

你会有什么好人建议的？

看看我的jsFiddle看看发生了什么:http://jsfiddle.net/Amp3rsand/EDWHX/2/

如果您取消注释文章中的第二个.content div,您将看到页脚隐藏,然后当您到达页面底部时应该取消隐藏.我的麻烦是,当内容比视口短时,我希望它显示页脚,就像第二个.content div被注释掉一样.

(即window.height> document.height对吗？)

在我的实际网站上,.content div被不同的div替换,每个页面都有唯一的id,因此我无法弄清楚如何专门定位它们.我正在做正确的方法吗？

这是我的代码,因为某些原因不想使用jsFiddle的人:

HTML

<article>
    <div class="content"></div>
    <!--
        <div class="content"></div>
    -->
</article>

<footer>
            <ul id="footerlinks">
                <li><a href="#">home</a></li>
                <li><a href="#">contact</a></li>
            </ul>
</footer>
<div id="underfooter"></div>

CSS

article {
    min-height: 500px;
    background: black;
    padding: 10px;
    margin-bottom: 50px;
}

.content {
    height:500px;
    background: lightgrey;
    border: 1px dashed red;
}

footer {
    position: fixed;
    bottom: -50px;
    height: 40px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    border-top:2px solid #6ce6d5;
    background: white;
    z-index: 100;
}

#underfooter {
    position: …