如何用纯 CSS 实现页面之间的平滑过渡

html-css017

如何用纯 CSS 实现页面之间的平滑过渡,第1张

使用过渡属性 transition可以让页面的模块进行平滑过渡

例子:

<html>

<head>

<style>

div {

width: 100px

height: 100px

background: red

transition: width 2s

}

div:hover {

width: 300px

}

</style>

</head>

<body>

<div></div>

</body>

</html>

上面这个例子可以看到长宽100的正方形平滑过渡2s

transition的具体属性值

transition-property 规定设置过渡效果的 CSS 属性的名称。

transition-duration 规定完成过渡效果需要多少秒或毫秒。

transition-timing-function 规定速度效果的速度曲线。

transition-delay 定义过渡效果何时开始。

参考

http://www.w3school.com.cn/cssref/pr_transition.asp

最简单的办法就是setTimeout。你应该大概知道你的动画播放的时间,所以可以这样写

setTimeout(function(){

window.location.href = “跳转到页面”

}, 动画播放的时间)