要求：

1 、把效果添加到哪个 CSS 属性

2 、过渡效果的时长

3 、效果触发的动作 （hover）

<style type="text/css">
div{
	/* 宽度2秒的过渡 */
	transition:width 2s,height 3s,transform 3s;
}
div:hover{
	width: 500px;
	height: 500px;
	transform:rotate(40deg);
	background: red;
}
</style>

2.多项改变

<style type="text/css">
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 4s;
}

div:hover {
  width: 300px;
  height: 300px;
}
</style>

3.指定过渡的速度

用transition-timing-function属性

ease	规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
linear	规定从开始到结束具有相同速度的过渡效果
ease-in	规定缓慢开始的过渡效果
ease-out	规定缓慢结束的过渡效果
ease-in-out	规定开始和结束较慢的过渡效果
cubic-bezier(n,n,n,n)	允许您在三次贝塞尔函数中定义自己的值

<style type="text/css">
div:hover {
  width: 300px;
}
#div {transition-timing-function: ease-in;}
</style>

4.延迟过渡效果

用transition-delay属性

<style type="text/css">
div {
  transition-delay: 2s;
}
《/style》

5.总结

CSS 过渡属性：

transition	简写属性，用于将四个过渡属性设置为单一属性。
transition-delay	规定过渡效果的延迟（以秒计）。
transition-duration	规定过渡效果要持续多少秒或毫秒。
transition-property	规定过渡效果所针对的 CSS 属性的名称。
transition-timing-function	规定过渡效果的速度曲线。