css3的transition属性详解

最新推荐文章于 2022-03-01 18:06:57 发布

阿聪世家

最新推荐文章于 2022-03-01 18:06:57 发布

阅读量1.6k

点赞数

分类专栏： html5/css3 xhtml/div/css 文章标签： web前端开发 css3 html

本文链接：https://blog.csdn.net/congcong875/article/details/16963451

版权

xhtml/div/css 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

html5/css3

15 篇文章 0 订阅

订阅专栏

W3C标准中对css3的transition这是样描述的：
“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”

transition主要包含四个属性值：
执行变换的属性：transition-property,
变换延续的时间：transition-duration,
在延续时间段，变换的速率变化transition-timing-function,
变换延迟时间transition-delay。

下面分别来看这四个属性值

一、transition-property:
property针对了当前选择器的某个css属性进行设置。比如我要过渡一个背景色时，则设置property值为background。

二、transition-duration:

transition-duration是用来指定元素转换过程的持续时间，取值：<time>为数值，单位为s（秒）或者ms(毫秒),可以作用于所有元素，包括:before和:after伪元素。其默认值0，也就是变换时是即时的。

三、transition-timing-function:

transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率，transition-timing-function有6个可能值：

1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

6、cubic-bezier：（该值允许你去自定义一个时间曲线），特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

四、transition-delay:

transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，其取值：<time>为数值，单位为s（秒）或者ms(毫秒)，

其使用和transition-duration极其相似，也可以作用于所有元素，包括:before和:after伪元素。默认大小是"0"，也就是变换立即执行，没有延迟。

示例：

p {
	transition-property: background-color,color;
	transition-duration: 0.5s;
	transition-timing-function: ease-in-out 2s;

	-webkit-transition-property: background-color,color;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-timing-function: ease-in-out 2s;

	-moz-transition-property: background-color,color;
	-moz-transition-duration: 0.5s;
	-moz-transition-timing-function: ease-in-out 2s;
}

简写：

p {
  -webkit-transition: all .5s ease-in-out 1s;
  -o-transition: all .5s ease-in-out 1s;
  -moz-transition: all .5s ease-in-out 1s;
  transition: all .5s ease-in-out 1s;
}

下面是具体的例子，可以拷贝查看效果：

<!DOCTYPE html>
<html>
<head>
<title>CSS3</title>
<style type="text/css">
	 .hi{background:#ccc;
	    color:#FFF;
		padding:10px 0;
		width:300px;
		text-align:center;
		display:block;
		}
	 .hi:hover{
		background:#000;color:#f60;
		-moz-transition: background-color 0.5s ease-in,color 0.3s ease-out;
		-webkit-transition: background-color 0.5s ease-in,color 0.3s ease-out ;
		-o-transition: background-color 0.5s ease-in,color 0.3s ease-out;
		transition: background-color 0.5s ease-in,color 0.3s ease-out;
	  }
	  .trans {
		display: inline-block;
		padding: 1px 8px;
		text-decoration:none;
		background:#ccc;
		color:#fff;
		
		transition-property: background-color,color;
		transition-duration: 0.5s;
		transition-timing-function: ease-in-out 2s;
		
		-webkit-transition-property: background-color,color;
		-webkit-transition-duration: 0.5s;
		-webkit-transition-timing-function: ease-in-out 2s;

		-moz-transition-property: background-color,color;
		-moz-transition-duration: 0.5s;
		-moz-transition-timing-function: ease-in-out 2s;
	 }
	 .trans:hover {
		background-color: #ddd;
		color:#f60;
		}

	 h1 { 
		display:block; width:160px;  line-height:30px; text-align:center; padding:10px; background:#33589f; color:#fff; text-decoration:none;
		}
 
	 h1:hover { 
		background:#000; color:#f60;
		text-shadow:2px 2px 10px #f00;
		box-shadow:2px 2px 10px #000;
		opacity:0.8;
		width:260px;
		-moz-transition:background 0.5s ease-in, color 0.4s ease-out, text-shadow 0.5s linear, box-shadow 0.6s linear , opacity 0.6s linear,width 2s linear;	//多个属性的动画，可放HOVER也可以放在初始的地方
	 } 
</style>
</head>
<body>
	<h2 class="hi">你好CSS3 transition</h2>
	<a href="#" class="trans">经过我，看看CSS3 transition的效果哦</a>
	<h1>你好CSS3 transition 多个属性一起看</h1>
</body>
</html>

阿聪世家

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3的transition属性详解

W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”transition主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-dur
复制链接

扫一扫

专栏目录