css3中的變形（transform）、過渡（transition）、動畫（animation）屬性

waruqi 發布于2019-08-30 10:51 / 1234人閱讀

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

css3中制作動畫的幾個屬性：css3中的變形（transform）、過渡（transition）、動畫（animation）。

一、 CSS3變形（transform）

語法：

transform ： none |  [  ]* 
也就是：
transform: rotate | scale | skew | translate |matrix;

1.1、旋轉rotate（）

rotate() :通過指定的角度參數對元素指定一個2D rotation(2D旋轉)，需先有transform-origin屬性的定義（默認旋轉中點是中心點）。

transform-origin定義的是旋轉的基點，其中angle是指選擇角度，正順時針旋轉，負逆時針旋轉。（關于變形基點已在前幾篇中講解過，https://segmentfault.com/a/11...）

1.2、移動translate（X,Y）

transform(100px,20px);

transform:translateX(100px):

transform:translateY(20px)

1.3、縮放scale（X,Y）

scale([, ])：提供執行[sx,sy]縮放矢量的兩個參數指定一個2D scale（2D縮放）。如果第二個參數未提供，則取與第一個參數一樣的值。而Y是一個可選參數，如果沒有設置Y值，則表示X，Y兩個方向的縮放倍數是一樣的,并以X為準。如：transform:scale(2,1.5);

1.4、斜切skew()

skew( [, ]) ：X軸Y軸上的skew transformation（斜切變換）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則值為0，也就是Y軸方向上無斜切。skew是用來對元素進行扭曲變行，第一個參數是水平方向扭曲角度，第二個參數是垂直方向扭曲角度。其中第二個參數是可選參數，如果沒有設置第二個參數，那么Y軸為0deg。同樣是以元素中心為基點，我們也可以通過transform-origin來改變元素的基點位置。

transform:skew(30deg,10deg);

方法：X軸：正數為左，負數為右； Y軸：正數為下，負數為上

二、CSS3過渡（transition）

屬性詳解

transition-property

不是所有屬性都能過渡，只有屬性具有一個中間點值才具備過渡效果。
transition-duration

指定從一個屬性到另一個屬性過渡所要花費的時間。默認值為0，為0時，表示變化是瞬時的，看不到過渡效果。

transiton-timing-function

過渡函數，有如下幾種：

liner ：勻速

ease-in：加速

ease-out：減速

ease-in-out：先加速再減速

cubic-bezier：三次貝塞爾曲線，可以定制

觸發過渡

單純的代碼不會觸發任何過渡操作，需要通過用戶的行為（如點擊，懸浮等）觸發，可觸發的方式有：
:hoever :focus :checked 媒體查詢觸發 JavaScript觸發

局限性

transition的優點在于簡單易用，但是它有幾個很大的局限。

（1）transition需要事件觸發，所以沒法在網頁加載時自動發生。

（2）transition是一次性的，不能重復發生，除非一再觸發。

（3）transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。

（4）一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。

CSS Animation就是為了解決這些問題而提出的。

三、CSS3 animation(動畫)

CSS3的animation屬性可以像Flash制作動畫一樣，通過控制關鍵幀來控制動畫的每一步，實現更為復雜的動畫效果。ainimation實現動畫效果主要由兩部分組成：

1）通過類似Flash動畫中的幀來聲明一個動畫；
2）在animation屬性中調用關鍵幀聲明的動畫。**

注：animation屬性到目前位置得到了大多數瀏覽器的支持，但是，需要添加瀏覽器前綴哦！

animation動畫屬性

還是先列表格來說明屬性，自己感覺會比較清晰：

（1）animation-name：none為默認值，將沒有任何動畫效果，其可以用來覆蓋任何動畫
（2）animation-duration：默認值為0，意味著動畫周期為0，也就是沒有任何動畫效果
（3）animation-timing-function：與transition-timing-function一樣
（4）animation-delay：在開始執行動畫時需要等待的時間
（5）animation-iteration-count：定義動畫的播放次數，默認為1，如果為infinite，則無限次循環播放
（6）animation-direction：默認為nomal，每次循環都是向前播放，（0-100），另一個值為alternate，動畫播放為偶數次則向前播放，如果為基數詞就反方向播放
（7）animation-state：默認為running，播放，paused，暫停
（8）animation-fill-mode：定義動畫開始之前和結束之后發生的操作，默認值為none，動畫結束時回到動畫沒開始時的狀態；forwards，動畫結束后繼續應用最后關鍵幀的位置，即保存在結束狀態；backwards，讓動畫回到第一幀的狀態；both：輪流應用forwards和backwards規則。

@keyframes
CSS3的animation制作動畫效果主要包括兩部分：1. 用關鍵幀聲明一個動畫，2.在animation調用關鍵幀聲明的的動畫。

@keyframes就是關鍵幀。這個幀與Flash里的幀類似，一個動畫中可以有很多個幀。

一個@keyframes中的樣式規則是由多個百分比構成的，可以在這個規則上創建多個百分比，從而達到一種不斷變化的效果。另外，@keyframes必須要加webkit前綴。舉個例子：

div:hover {
  -webkit-animation: 1s changeColor;
  animation: 1s changeColor;  
}

@-webkit-keyframes changeColor {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}
@keyframes changeColor {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

上面代碼中的0% 100%的百分號都不能省略，0%可以由from代替，100%可以由to代替。要讓changeColor動畫有效果，就必須要通過CSS3animation屬性來調用它。

區別

animation屬性類似于transition，他們都是隨著時間改變元素的屬性值，其主要區別在于：transition需要觸發一個事件才會隨著時間改變其CSS屬性；animation在不需要觸發任何事件的情況下，也可以顯式的隨時間變化來改變元素CSS屬性，達到一種動畫的效果

GPU云服務器云服務器翻轉過渡動畫 ios過渡動畫 jquery過渡動畫 html 變形屬性

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

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

CSS3新特性的概述

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

Zachary 2019-08-29 13:17 評論0 收藏0
css3變形動畫的一些基礎知識

摘要：指定完成過渡所需的時間，完成一次動畫所需時間指定過渡函數，動畫播放方式指定開始出現的延遲時間，如果沒有延遲我們可以用或者直接不寫。第一種第二種第三種被稱為關鍵幀，其類似于中的關鍵幀。表示動畫在結束后繼續應用最后的關鍵幀的位置。 transform rotate(180deg)2D旋轉正值代表順時針旋轉180度，負值代表逆時針旋轉，用法transform:rotate(180deg);...

gghyoo 2019-08-29 16:39 評論0 收藏0
10分鐘入門 CSS3 Animation

摘要：中文譯為轉換，但我更傾向于稱呼它變形大名鼎鼎的變形金剛叫。意為縮放，顧名思義，是用于改變元素的大小。每個時間點對應一個狀態，代表一個關鍵幀。我們可以在可視化的創建我們自己的貝塞爾曲線。簡介 Animation可以讓你不用依賴javascript或jquery，用純CSS在網頁中輕松實現各種動畫效果。兼容性 animation在絕大部分主流瀏覽器都得到了很好的支持！還在兼容IE9的同...

Elle 2019-08-02 13:57 評論0 收藏0
搞清animation/transtion/transform/translate

摘要：規則內指定一個樣式和動畫將逐步從目前的樣式更改為新的樣式。功能若觸發動畫事件后在動畫未結束前停止事件會放棄當前動畫從此時的狀態開始執行停止事件的動畫。 css3動畫 animation 使用css3動畫需要2步為指定元素添加animation屬性及屬性值。各瀏覽器私有屬性在前，通用屬性在最后。使用@keyframes定義動畫過程名稱。各瀏覽器私有屬性在前，通用屬性在最后。 an...

tain335 2019-08-29 16:57 評論0 收藏0