CSS3 transition 属性过渡效果 详解

CSS3 transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡。我们可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添加效果。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变 CSS 的属性值。以下是 transition 属性的浏览器支持、语法和示例。

浏览器支持

Internet Explorer 10 及以上版本、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
Internet Explorer 9 以及更早的版本不支持 transition 属性。
Chrome 25 以及更早的版本,需要前缀 -webkit-。

语法

transition 属性主要包含四个属性值:
transition-property — 规定应用过渡的 CSS 属性的名称;
transition-duration — 定义过渡效果花费的时间,默认是 0;
transition-timing-function — 规定过渡效果的时间曲线。默认是 “ease”;
transition-delay — 规定过渡效果何时开始,默认是 0。

transition — 简写属性,用于在一个属性中设置四个过渡属性。

如需向多个样式添加过渡效果,请添加多个属性,由逗号隔开。

示例

一、改变宽度属性
请把鼠标移动到下面的元素上:

div.css3-transition-test1 {
	transition-property: width;
	transition-duration: 1s;
	transition-timing-function: ease-in;
	transition-delay: 0;
	/* Firefox 4 */
	-moz-transition-property: width;
	-moz-transition-duration: 1s;
	-moz-transition-timing-function: ease-in;
	-moz-transition-delay: 0;
	/* Safari and Chrome */
	-webkit-transition-property: width;
	-webkit-transition-duration: 1s;
	-webkit-transition-timing-function: ease-in;
	-webkit-transition-delay: 0;
	/* Opera */
	-o-transition-property: width;
	-o-transition-duration: 1s;
	-o-transition-timing-function: ease-in;
	-o-transition-delay: 0;
}

div.css3-transition-test1 {
	transition: width 1s ease-in;
	-moz-transition: width 1s ease-in; /* Firefox 4 */
	-webkit-transition: width 1s ease-in; /* Safari and Chrome */
	-o-transition: width 1s ease-in; /* Opera */ 
}

二、改变多个属性
请把鼠标移动到下面的元素上:

CSS3 过渡

p.css3-transition-test2 {
	-webkit-transition: -webkit-transform 1s, opacity 1s, background 1s, width 1s, height 1s, font-size 1s;
	-moz-transition-property: width, height, -o-transform, background, font-size, opacity;
	-moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
	-o-transition-property: width, height, -o-transform, background, font-size, opacity;
	-o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
	transition-property: width, height, transform, background, font-size, opacity;
	transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
}

p.css3-transition-test2:hover {
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
}

1 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

验证码已失效,请刷新验证码