CSS3中transition, transform和animation的區(qū)別是什么

本文小編為大家詳細(xì)介紹“CSS3中transition, transform和animation的區(qū)別是什么”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“CSS3中transition, transform和animation的區(qū)別是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

    transition

    transition允許css的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過(guò)渡，語(yǔ)法如下：

    transition：transition-propertytransition-durationtransition-timing-functiontransition-delay[,...]

    transition的相關(guān)屬性：

    transition-property：用來(lái)指定執(zhí)行transition效果的屬性，可以為none,all或者特定的屬性。

    transition-duration：動(dòng)畫(huà)執(zhí)行的持續(xù)時(shí)間，單位為s（秒）或者ms（毫秒）。

    transition-timing-function：變換速率效果，可選值為ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier（自定義時(shí)間曲線）。

    transition-delay：用來(lái)指定動(dòng)畫(huà)開(kāi)始執(zhí)行的時(shí)間，取值同transition-duration，但是可以為負(fù)數(shù)。

    transform

    transform分為2D和3D，這里暫時(shí)只介紹比較常用的2Dtransform，其主要包含以下幾種變換：旋轉(zhuǎn)rotate、扭曲skew、縮放scale和移動(dòng)translate以及矩陣變形matrix，語(yǔ)法如下：

    transform:rotate|scale|skew|translate|matrix;

    transform的相關(guān)屬性：

    rotate旋轉(zhuǎn)

    rotate的單位是deg度，正數(shù)表示順時(shí)針旋轉(zhuǎn)，負(fù)數(shù)表示逆時(shí)針旋轉(zhuǎn)。

    scale縮放

    scale的取值范圍是0~n，小于1時(shí)表示縮小，反之表示放大。例如scale(0.5,2)表示水平方向縮小1倍，垂直方向放大1倍，另外，也可以通過(guò)scaleX或者scaleY對(duì)一個(gè)方向進(jìn)行設(shè)置。

    skew扭曲

    skew的單位跟rotate一樣都是deg度。例如skew(30deg,10deg)表示水平方向傾斜30度，垂直方向傾斜10度。

    translate偏移

    偏移同樣包括水平偏移和垂直偏移。translate(x,y)水平方向和垂直方向同時(shí)移動(dòng)（也就是X軸和Y軸同時(shí)移動(dòng)）；translateX(x)僅水平方向移動(dòng)（X軸移動(dòng)）；translateY(Y)僅垂直方向移動(dòng)（Y軸移動(dòng)）。

    animation

    CSS3中的animation是通過(guò)一個(gè)叫Keyframes關(guān)鍵幀的玩意來(lái)控制的，他的命名是由"@keyframes"開(kāi)頭，后面緊接著是這個(gè)“動(dòng)畫(huà)的名稱”加上一對(duì)花括號(hào)“{}”，括號(hào)中就是一些不同時(shí)間段樣式規(guī)則，有點(diǎn)像我們css的樣式寫(xiě)法一樣。對(duì)于一個(gè)"@keyframes"中的樣式規(guī)則是由多個(gè)百分比構(gòu)成的，如“0%”到"100%"之間，語(yǔ)法如下：

    @keyframesIDENT{

    from{

    Properties:Propertiesvalue;

    }

    Percentage{

    Properties:Propertiesvalue;

    }

    to{

    Properties:Propertiesvalue;

    }

    }

    或者全部寫(xiě)成百分比的形式：

    @keyframesIDENT{

    0%{

    Properties:Propertiesvalue;

    }

    Percentage{

    Properties:Propertiesvalue;

    }

    100%{

    Properties:Propertiesvalue;

    }

    }

    animation和transition一樣有自己相對(duì)應(yīng)的屬性，那么在animation主要有以下幾種：animation-name;animation-duration;animation-timing-function;animation-delay;animation-iteration-count;animation-direction;animation-play-state。下面對(duì)其中的一些屬性進(jìn)行解釋：

    animation-name關(guān)鍵幀名：

    用來(lái)定義一個(gè)動(dòng)畫(huà)的名稱，也就是由前面的keyframes創(chuàng)建的動(dòng)畫(huà)名，默認(rèn)值為none，當(dāng)值為none時(shí)，將沒(méi)有任何動(dòng)畫(huà)效果。如果我們要同時(shí)附幾個(gè)animation給一個(gè)元素，只要用逗號(hào),隔開(kāi)即可。

    animation-iteration-count動(dòng)畫(huà)循環(huán)次數(shù)：

    默認(rèn)為1，如果要進(jìn)行無(wú)限循環(huán)，只要設(shè)為infinite即可。

    animation-direction動(dòng)畫(huà)播放的方向：

    其只有兩個(gè)值，默認(rèn)值為normal，如果設(shè)置為normal時(shí)，動(dòng)畫(huà)的每次循環(huán)都是向前播放；另一個(gè)值是alternate，他的作用是，動(dòng)畫(huà)播放在第偶數(shù)次向前播放，第奇數(shù)次向反方向播放。

    animation-play-state播放狀態(tài)：

    其主要有兩個(gè)值，running和paused，其中running為默認(rèn)值?？梢酝ㄟ^(guò)paused將正在播放的動(dòng)畫(huà)停下了，也可以通過(guò)running將暫停的動(dòng)畫(huà)重新播放。這個(gè)屬性不常用。

讀到這里，這篇“CSS3中transition, transform和animation的區(qū)別是什么”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。