css3之transition过渡属性

要实现过渡效果，必须规定两项内容

• 规定您希望把效果添加到哪个 CSS 属性上
• 规定效果的时长
  例：

div
{
 	width: 100px;
 	height: 100px;
	background-color: #ccffff;
	transition: width 2s;
}
div:hover
{
	width:300px;
}

上例就会将原来的100像素宽的元素在两秒内变成300像素宽，从而实现了过渡

多项改变

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

div {
            width: 100px;
            height: 100px;
            background-color: #ccffff;
            transition: width 2s,height 2s,transform 2s;
        }
div:hover {
            height: 300px;
            width: 300px;
            transform: rotate(180deg);
        }

transition只是简写属性，下面的表格列出了所有的转换属性：
|

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。
transition-delay	规定过渡效果何时开始。默认是 0。