CSS3中transition,transform和animation指的是什么

這篇文章主要介紹了CSS3中transition, transform 和 animation指的是什么，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

走過十載，我們已為眾多企業(yè)及政府機(jī)關(guān)提供專業(yè)的互聯(lián)網(wǎng)服務(wù)。我們不只是一家專業(yè)網(wǎng)站建設(shè)公司；我們對(duì)營銷、技術(shù)、服務(wù)都有自己獨(dú)特見解，創(chuàng)新互聯(lián)采取“創(chuàng)意+綜合+營銷”一體化的方式為您提供更專業(yè)的服務(wù)！創(chuàng)新互聯(lián)經(jīng)歷的每一步也許不一定是最完美的，但每一步都有值得深思的意義。

transition

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

transition ： transition-property transition-duration transition-timing-function transition-delay [, ...]

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

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

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

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

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

transform

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

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

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

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

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

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

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

@keyframes IDENT {
  from {
    Properties: Properties value;
  }
  Percentage {
    Properties: Properties value;
  }
  to {
    Properties: Properties value;
  }
}

或者全部寫成百分比的形式： 
@keyframes IDENT {
  0% {
    Properties: Properties value;
  }
  Percentage {
    Properties: Properties value;
  }
  100% {
    Properties: Properties value;
  }
}

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)行解釋：

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

  2. animation-iteration-count 動(dòng)畫循環(huán)次數(shù)：
    默認(rèn)為1，如果要進(jìn)行無限循環(huán)，只要設(shè)為infinite即可。

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

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享CSS3中transition, transform 和 animation指的是什么內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來學(xué)習(xí)!

網(wǎng)頁題目：CSS3中transition,transform和animation指的是什么
文章位置：http://bm7419.com/article8/isgeop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站排名、動(dòng)態(tài)網(wǎng)站、ChatGPT、網(wǎng)頁設(shè)計(jì)公司、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)