成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS3 Transition, transform 和 animation 介紹

wums / 2535人閱讀

摘要：和介紹允許的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過(guò)渡，語(yǔ)法如下用來(lái)指定執(zhí)行效果的屬性，可以為或者特定的屬性?？s放的取值范圍是，小于時(shí)表示縮小，反之表示放大。

CSS3 提供了transition 過(guò)渡、transform 變換和animation 動(dòng)畫來(lái)實(shí)現(xiàn)頁(yè)面中的一些樣式轉(zhuǎn)化，這篇文章會(huì)對(duì)這幾個(gè)屬性做簡(jiǎn)單的介紹，然后比較一下 CSS3 動(dòng)畫和 JS 動(dòng)畫哪個(gè)性能更好。

Transition, transform 和 animation 介紹 transition

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

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

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

transition-duration
動(dòng)畫執(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)畫開始執(zhí)行的時(shí)間，取值同transition-duration，但是可以為負(fù)數(shù)。

DEMO:http://codepen.io/CodingMonkeyzh/pen/ZGBRVe

transform

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

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

rotate 旋轉(zhuǎn)
rotate 的單位是deg 度，正數(shù)表示順時(shí)針旋轉(zhuǎn)，負(fù)數(shù)表示逆時(shí)針旋轉(zhuǎn)。
DEMO：http://codepen.io/CodingMonkeyzh/pen/XbNYOa

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

skew 扭曲
skew 的單位跟rotate一樣都是deg 度。例如 skew(30deg, 10deg)表示水平方向傾斜30度，垂直方向傾斜10度。
DEMO：http://codepen.io/CodingMonkeyzh/pen/KpNeYg

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)）。
DEMO：http://codepen.io/CodingMonkeyzh/pen/waoXbB

animation

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

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

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

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

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

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

DEMO 1: http://codepen.io/CodingMonkeyzh/pen/mJOKZY

DEMO 2: http://codepen.io/CodingMonkeyzh/pen/EjNpaE

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92324.html

相關(guān)文章

  • CSS3新特性的概述

    摘要：的新特性大致分為以下六類選擇器邊框與圓角背景與漸變過(guò)渡變換動(dòng)畫下面分別說(shuō)一說(shuō)以上六類都有哪些內(nèi)容選擇器基本選擇器基本選擇器又分為子選擇器相鄰兄弟選擇器通用兄弟選擇器群組選擇器屬性選擇器為帶有屬性的元素設(shè)置樣式為屬性的元素設(shè)置樣式選擇屬性值包 CSS3的新特性大致分為以下六類 1.CSS3選擇器 2.CSS3邊框與圓角 3.CSS3背景與漸變 4.CSS3過(guò)渡 5.CSS3變換 ...

    Zachary 評(píng)論0 收藏0

  • css3中的變形（transform）、過(guò)渡（transition）、動(dòng)畫（animation）屬性

    摘要：中制作動(dòng)畫的幾個(gè)屬性中的變形過(guò)渡動(dòng)畫。默認(rèn)值為，為時(shí)，表示變化是瞬時(shí)的，看不到過(guò)渡效果。實(shí)現(xiàn)動(dòng)畫效果主要由兩部分組成通過(guò)類似動(dòng)畫中的幀來(lái)聲明一個(gè)動(dòng)畫在屬性中調(diào)用關(guān)鍵幀聲明的動(dòng)畫。 css3中制作動(dòng)畫的幾個(gè)屬性：css3中的變形（transform）、過(guò)渡（transition）、動(dòng)畫（animation）。 一、 CSS3變形（transform） 語(yǔ)法： transform ： no...

    waruqi 評(píng)論0 收藏0

  • css3動(dòng)畫屬性詳解之transform、transition、animation

    摘要：動(dòng)畫屬性詳解關(guān)于制作動(dòng)畫的幾個(gè)屬性變形轉(zhuǎn)換和動(dòng)畫。一屬性旋轉(zhuǎn)中心為原點(diǎn)扭曲傾斜縮放移動(dòng)矩陣變形。各個(gè)屬性的用法旋轉(zhuǎn)其中表示度。承載動(dòng)畫的另一個(gè)屬性。定義動(dòng)畫的名稱。一個(gè)或多個(gè)合法的樣式屬性。 css3動(dòng)畫屬性詳解： 關(guān)于CSS3制作動(dòng)畫的幾個(gè)屬性：變形(transform)、轉(zhuǎn)換(transition)和動(dòng)畫(animation)。 一、transform 屬性： 旋轉(zhuǎn)rotate（中...

    Riddler 評(píng)論0 收藏0

  • CSS3轉(zhuǎn)換過(guò)渡動(dòng)畫

    摘要：轉(zhuǎn)換能夠?qū)υ剡M(jìn)行移動(dòng)縮放轉(zhuǎn)動(dòng)拉長(zhǎng)或拉伸。和和的參數(shù)可以為。過(guò)渡該屬性和配合使用，實(shí)現(xiàn)鼠標(biāo)移入動(dòng)畫效果。實(shí)例動(dòng)畫該屬性和配合使用。規(guī)則用于創(chuàng)建動(dòng)畫。在中規(guī)定某項(xiàng)樣式，就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動(dòng)畫效果。 CSS3中有三個(gè)屬性：transform、transition、animation，一直容易搞混，今天特意拎出來(lái)理一理。 transform 轉(zhuǎn)換 transform 能夠?qū)υ?..

    MonoLog 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<