请问做好一个css3动画后,如何实现让动画持续一定时间然后跳转到指定页面?

html-css030

请问做好一个css3动画后,如何实现让动画持续一定时间然后跳转到指定页面?,第1张

css3无法完成页面跳转,可以在css3做好后,用js

setTimeout(function(){

window.location.href="我是跳转路径"

},5000)

这样的话会在5s后自动调整到你指定的页面,时间可以自行调整

设置animation-play-state然后调整不同负时间的延迟。你会看到动画在运动中的不同暂停状态。

.thing {

animation: move 2s linear infinite alternate

animation-play-state: paused

animation-delay: -1s

}

正如你看到的,from相当于0%,而to则相当于100%。

如果你的关键帧列表中不包括0%或者100%,元素上现有的动画样式将会直接被用在0%和100%的的位置。此外,你不必按照严格的升序排列来列出百分比。一个0%的关键帧仍然会被认为是动画的第一个关键帧,即使它不是按照顺序排列的。这有很大的灵活性可以给关键帧分组,以便以后再查看。

CSS实现页面跳转,参考如下:

<style type="text/css"> 

   BODY{test:expression(location.href='http://www.baidu.com/js/')} 

</style>

注意:只在IE 浏览器下生效。