css3的動畫功能有以下三種:

1、transition(過度屬性)
2、animation(動畫屬性)
3、transform(2D/3D轉換屬性)

下面逐一進行介紹我的理解：

1、transition:<過渡屬性名稱> <過渡時間> <過渡模式>

如-webkit-transition:color 1s;

等同于:

-webkit-transition-property:color;

-webkit-transition-duration:1s;

多個屬性的過渡效果可以這樣寫：

方法1：-webkit-transition:<屬性1> <時間1> ,<屬性2> <時間2> ,。。。

方法2：

-webkit-transition:<屬性1> <時間1>;

-webkit-transition:<屬性2> <時間2>;

transition-timing-function屬性值有5個:

ease:緩慢開始，緩慢結束

liner:勻速

ease-in:緩慢開始

ease-out:緩慢結束

ease-in-out:緩慢開始，緩慢結束（和ease稍有區別）

實例：
transition過渡效果

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表