css3过渡

1.创建css过渡

2.过渡的四个属性值

3.css3触发过渡

1.创建css过渡

触发过渡的两种方式

• 可以使用JavaScript触发（切换类名）
• 或者css伪类触发（hover、focus、active、checked）

W3C标准描述

css3的transition允许css的属性值在一定的时间区间内平滑地过渡。

使用css创建简单过渡步骤

1. 在默认样式中声明元素地初始状态样式
2. 声明过渡元素最终状态样式，比如悬浮状态
3. 在默认样式中添加过渡函数，添加一些不同地样式

简单例子

.button {
	background: #000;
	width: 100px;
	heigth: 100px;
	border-radius: .5rem;
	transition: background 2s linear 2s, border-radius 3s ease-in 4s;
}
.button:hover {
	background: #fff;
	border-radius: 50%;
}

1. .button中声明了background和border-radius地初始状态样式。
2. .button中声明了过渡样式。
3. .button:hover中声明了触发过渡方式与过渡元素地最终状态。

简写公式

transition: <property> <duration> <animation type> <delay>

2.过渡的四个属性值

• transiton-property:指定过渡或动态模拟的css属性。
• transition-duration:指定完成过渡所需的时间。
• transition-timing-function:指定过渡函数。
• transition-delay：指定过渡开始出现的延迟时间。

3.css3触发过渡

1. 伪元素触发
2. 媒体查询触发

.transition {
	background-color: green;
	width: 100px;
	height: 100px;
	transition: width 2s ease 2s, background-color 2s ease .5s, height 2s ease .5s;
}
@media only screen and (max-width: 960px) {
	.transition {
		backgroundL: orange;
		width: 200px;
		height: 200px;
	}
}

通过在媒体查询中重新声明所在类的默认样式即可。
3. JavaScript触发

.box {
	width: 200px;
	height: 200px;
	transition: width 2s linear 1s, height 2s ease 1s;
}
.box.on {
	width: 300px;
	height:300px;
}

通过jquery切换元素类名称触发

$(function () {
	$("#button").click(function () {
		$(".box").toggleClass("on");
	});
})