浏览器支持：
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 */
}
二、改变多个属性
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);
}
