首页 > 代码库 > CSS之transition

CSS之transition

2024-08-15 18:17:18   223人阅读

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>

鼠标经过矩形查看过度效果:

<style></style>
  • linear: 线性过渡
  • ease: 平滑过渡
  • ease-in: 由慢到快
  • ease-out: 由快到慢
  • ease-in-out: 由慢到快再到慢

CSS之transition


联系
我们