transition过渡参数：trasition-property:检索或设置对象中的参与过渡的属性（all,none,指定要进行过渡的CSS属性）transition-duration:设置对象过渡的持续时间transition-timing-function:检索或设置对象中过渡的动画类型:(linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内)transition-delay:检索或设置对象延迟过渡的时间
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS之transition</title>
</head>
<style>
.test{
overflow:hidden;
width:100%;
margin:0;
padding:0;
list-style:none;
}
.test li{
position:relative;
left:8px;
width:220px;
height:100px;
margin:1px 5px;
padding:10px;
border:1px solid #ddd;
background-color:#eee;
color:#000;
-moz-transition-property:left;
-moz-transition-duration:.5s;
-webkit-transition-property:left;
-webkit-transition-duration:.5s;
-o-transition-property:left;
-o-transition-duration:.5s;
-ms-transition-property:left;
-ms-transition-duration:.5s;
transition-property:left;
transition-duration:.5s;
}
.test li:nth-child(1){
-moz-transition-timing-function:linear; -webkit-transition-timing-function:linear;
-o-transition-timing-function:linear;
-ms-transition-timing-function:linear;
transition-timing-function:linear;
}
.test li:nth-child(2){
-moz-transition-timing-function:ease;
-webkit-transition-timing-function:ease;
-o-transition-timing-function:ease;
-ms-transition-timing-function:ease;
transition-timing-function:ease;
}
.test li:nth-child(3){
-moz-transition-timing-function:ease-in;
-webkit-transition-timing-function:ease-in;
-o-transition-timing-function:ease-in;
-ms-transition-timing-function:ease-in;
transition-timing-function:ease-in;
}
.test li:nth-child(4){
-moz-transition-timing-function:ease-out;
-webkit-transition-timing-function:ease-out;
-o-transition-timing-function:ease-out;
-ms-transition-timing-function:ease-out;
transition-timing-function:ease-out;
}
.test li:nth-child(5){
-moz-transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out;
-o-transition-timing-function:ease-in-out;
-ms-transition-timing-function:ease-in-out;
transition-timing-function:ease-in-out;
}
.test li:hover{left:100px;}
</style>
<body>
<ul class="test">
<li>linear: 线性过渡</li>
<li>ease: 平滑过渡</li>
<li>ease-in: 由慢到快</li>
<li>ease-out: 由快到慢</li>
<li>ease-in-out: 由慢到快再到慢</li>
</ul>
</body>
</html>
鼠标经过矩形查看过度效果:
- linear: 线性过渡
- ease: 平滑过渡
- ease-in: 由慢到快
- ease-out: 由快到慢
- ease-in-out: 由慢到快再到慢
时间： 2024-12-14 07:52:56