CSS3过渡

Posted 2020-06-11

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

要实现这一点，必须规定希望把效果添加到哪个 CSS 属性上和规定效果的时长。

属性：
      transition；
      transition-property；
      transition-duration；
      transition-timing-function；
      transition-delay；

 

ex：

　　div{
            transition: width 1s linear 2s;
            /* Firefox 4 */
            -moz-transition:width 1s linear 2s;
            /* Safari and Chrome */
            -webkit-transition:width 1s linear 2s;
            /* Opera */
            -o-transition:width 1s linear 2s;
        }

 

　 向宽度、高度和转换添加过渡效果：
    div{
        transition: width 2s, height 2s, transform 2s;
        -moz-transition: width 2s, height 2s, -moz-transform 2s;
        -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
        -o-transition: width 2s, height 2s,-o-transform 2s;
    }