CSS动画后滚动到锚点?

时间:2014-01-07 10:24:18

标签: javascript jquery html css

我有一个像这样的CSS动画:

@-webkit-keyframes flip {
0% {opacity:1;}
100% {opacity: 0;} //This could be 90%
//And here could be frame for 100% which would scroll it down.
}

#headercover {
    -webkit-animation-name:flip;
-webkit-animation-duration:3s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count:1;
-webkit-animation-play-state:running;
-webkit-animation-fill-mode: forwards;

我希望页面在动画的最后一帧之后向下滚动到一个锚点。 我在jQuery或JavaScript方面不是很有经验,所以你能帮助我吗?

查看网站:HERE

1 个答案:

答案 0 :(得分:1)

setTimeout(function(){
    $('html, body').animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
}, 3000); // wait 3000 ms