045_CSS3过渡-优快云博客

本文介绍了如何使用CSS3的过渡属性为网页元素添加平滑的视觉效果。文章详细解释了transition属性及其子属性如transition-property、transition-duration等的作用，并提供了具体的代码示例。

1. 通过CSS3, 我们可以在不使用Flash动画或JavaScript的情况下, 当元素从一种样式变换为另一种样式时为元素添加效果。

2. 过渡属性

3. transition属性

3.1. transition 属性是一个简写属性, 用于设置四个过渡属性:

transition-property
transition-duration
transition-timing-function
transition-delay

3.2. 请始终设置 transition-duration属性, 否则时长为0, 就不会产生过渡效果。

3.3. 默认值

3.4. 可能值

4. transition-property属性

4.1. transition-property属性规定应用过渡效果的CSS属性的名称。

4.2. 默认值

4.3. 可能值

5. transition-duration属性

5.1. transition-duration属性规定完成过渡效果需要花费的时间(以秒或毫秒计)。

5.2. 默认值

5.3. 可能值

6. transition-timing-function属性

6.1. transition-timing-function属性规定过渡效果的速度曲线。

6.2. 该属性允许过渡效果随着时间来改变其速度。

6.3. 默认值

6.4. 可能值

6.5. 实例

#div1 {
	transition-timing-function: linear;
}
#div2 {
	transition-timing-function: ease;
}
#div3 {
	transition-timing-function: ease-in;
}
#div4 {
	transition-timing-function: ease-out;
}
#div5 {
	transition-timing-function: ease-in-out;
}

6.6. cubic-bezier实例

#div1 {
	transition-timing-function: cubic-bezier(0,0,1,1);
}
#div2 {
	transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);
}
#div3 {
	transition-timing-function: cubic-bezier(0.42,0,1,1);
}
#div4 {
	transition-timing-function: cubic-bezier(0,0,0.58,1);
}
#div5 {
	transition-timing-function: cubic-bezier(0.42,0,0.58,1);
}

7. transition-delay属性

7.1. transition-delay属性规定过渡效果何时开始。

7.2. transition-delay值以秒或毫秒计。

7.3. 默认值

7.4. 可能值

8. 例子

8.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS3过渡</title>
		<meta charset="utf-8" />

		<style type="text/css">
			div {
				margin: 40px;
				width: 100px;
				height: 100px;
				background: yellow;
				transition: width 1s linear 0s, height 2s, transform 2s;
			}
			div:hover {
				width: 200px;
				height: 200px;
				transform: rotate(180deg);
			}
		</style>
	</head>
	<body>
		<div>请把鼠标指针放到黄色的div元素上, 来查看过渡效果。</div>
	</body>
</html>

8.2. 效果图