transition:过度效果属性

CSS3 过度

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

请把鼠标移动到下面的元素上：

浏览器支持

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。

注释：Internet Explorer 9 以及更早的版本，不支持 transition 属性。

注释：Chrome 25 以及更早的版本，需要前缀 -webkit-。

它如何工作？

                 CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

                          要实现这一点，必须规定两项内容：

                              ~   规定您希望把效果添加到哪个 CSS 属性上

                              ~    规定效果的时长

实 例

              css{

                      width:100px;

                      height:100px;

                       background:blue;

                      transition:width 2s;

                      -moz-transition:width 2s;/*firefox 4 */

                     -webkit-transition:width 2s /* Safari and chrome */

                     -o-transition:width 2s;/Opera*/

              }

属 性

过度属性

---

属性详解：

transition：简写属性

transition-property：应用过度属性名称

transition-duration：过度效果花费时间

transition-timing-function：过度的效果时间曲线

transition-delay：过度效果开始时间