CSS3 Transition, transform 和 animation 介紹

wums 發布于2019-08-22 11:50 / 2525人閱讀

摘要：和介紹允許的屬性值在一定的時間區間內平滑地過渡，語法如下用來指定執行效果的屬性，可以為或者特定的屬性。縮放的取值范圍是，小于時表示縮小，反之表示放大。

CSS3 提供了transition 過渡、transform 變換和animation 動畫來實現頁面中的一些樣式轉化，這篇文章會對這幾個屬性做簡單的介紹，然后比較一下 CSS3 動畫和 JS 動畫哪個性能更好。

Transition, transform 和 animation 介紹 transition

transition允許css的屬性值在一定的時間區間內平滑地過渡，語法如下：

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

transition-property
用來指定執行transition效果的屬性，可以為 none,all或者特定的屬性。

transition-duration
動畫執行的持續時間，單位為s（秒）或者 ms（毫秒）。

transition-delay
用來指定動畫開始執行的時間，取值同transition-duration，但是可以為負數。

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

transform

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

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

rotate 旋轉
rotate 的單位是deg 度，正數表示順時針旋轉，負數表示逆時針旋轉。
DEMO：http://codepen.io/CodingMonkeyzh/pen/XbNYOa

scale 縮放
scale 的取值范圍是0~n，小于1時表示縮小，反之表示放大。例如scale(0.5, 2)表示水平方向縮小1倍，垂直方向放大1倍，另外，也可以通過scaleX或者scaleY對一個方向進行設置。
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)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）；translateX(x)僅水平方向移動（X軸移動）；translateY(Y)僅垂直方向移動（Y軸移動）。
DEMO：http://codepen.io/CodingMonkeyzh/pen/waoXbB

animation

CSS3 中的 animation 是通過一個叫Keyframes 關鍵幀的玩意來控制的，他的命名是由"@keyframes"開頭，后面緊接著是這個“動畫的名稱”加上一對花括號“{}”，括號中就是一些不同時間段樣式規則，有點像我們css的樣式寫法一樣。對于一個"@keyframes"中的樣式規則是由多個百分比構成的，如“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一樣有自己相對應的屬性，那么在animation主要有以下幾種：animation-name;animation-duration;animation-timing-function;animation-delay;animation-iteration-count;animation-direction;animation-play-state。下面對其中的一些屬性進行解釋：

animation-name 關鍵幀名
用來定義一個動畫的名稱，也就是由前面的keyframes創建的動畫名，默認值為none，當值為none時，將沒有任何動畫效果。如果我們要同時附幾個animation給一個元素，只要用逗號,隔開即可。

animation-iteration-count 動畫循環次數
默認為1，如果要進行無限循環，只要設為infinite即可。

animation-direction 動畫播放的方向
其只有兩個值，默認值為normal，如果設置為normal時，動畫的每次循環都是向前播放；另一個值是alternate，他的作用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放。

animation-play-state 播放狀態
其主要有兩個值，running和paused，其中running為默認值。可以通過paused將正在播放的動畫停下了，也可以通過running將暫停的動畫重新播放。這個屬性不常用。

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

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

GPU云服務器云服務器 -transition Transition Transformed Transformer

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92324.html

CSS3新特性的概述

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

Zachary 2019-08-29 13:17 評論0 收藏0
css3中的變形（transform）、過渡（transition）、動畫（animation）屬性

摘要：中制作動畫的幾個屬性中的變形過渡動畫。默認值為，為時，表示變化是瞬時的，看不到過渡效果。實現動畫效果主要由兩部分組成通過類似動畫中的幀來聲明一個動畫在屬性中調用關鍵幀聲明的動畫。 css3中制作動畫的幾個屬性：css3中的變形（transform）、過渡（transition）、動畫（animation）。一、 CSS3變形（transform）語法： transform ： no...

waruqi 2019-08-30 10:51 評論0 收藏0
css3動畫屬性詳解之transform、transition、animation

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

Riddler 2019-08-30 12:46 評論0 收藏0
CSS3轉換過渡動畫

摘要：轉換能夠對元素進行移動縮放轉動拉長或拉伸。和和的參數可以為。過渡該屬性和配合使用，實現鼠標移入動畫效果。實例動畫該屬性和配合使用。規則用于創建動畫。在中規定某項樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。 CSS3中有三個屬性：transform、transition、animation，一直容易搞混，今天特意拎出來理一理。 transform 轉換 transform 能夠對元...

MonoLog 2019-08-29 12:14 評論0 收藏0