CSS3過渡、變換與動畫
CSS3過渡屬性
-
通過CSS3可以在不使用Flash動畫或JavaScript的情況下,為元素從一種樣式變 換為另一種樣式時新增效果。而CSS3過渡就是元素從一種樣式逐漸改變為另一種的效果。 要實現這一點,必須規定兩項內容:
規定你希望把效果新增到哪個CSS屬性上 規定效果的時長
-
transition-property 規定設定過渡效果的CSS屬性的名稱。
-
none 沒有屬性會獲得過渡效果。
-
all 所有屬性都將獲得過渡效果。
-
property 定義應用過渡效果的CSS屬性名稱列表,列表以逗號分隔。
-
-
transition-duration 規定完成過渡效果需要多少秒或毫秒。
-
time 規定完成過渡效果需要花費的時間(以秒或毫秒計)。預設值是0,意
味著不會有效果。
-
-
transition-timing-function規定速度效果的速度曲線。
-
linear 規定以相同速度開始至結束的過渡效果。
-
ease 規定慢速開始,然後變快,然後慢速結束的過渡效果。
-
ease-in 規定以慢速開始的過渡效果。
-
ease-out 規定以慢速結束的過渡效果。
-
ease-in-out 規定以慢速開始和結束的過渡效果。
-
-
transition-delay 定義過渡效果從何時開始。
-
time 規定在過渡效果開始之前需要等待的時間,以秒或毫秒計。
-
-
transition屬性簡寫
-
div {
transition:width 1s linear 2s;
}
-
CSS3的 transform 屬性
-
transform屬性向元素應用2D或3D轉換。該屬性允許我們對元素進行位移、旋轉、 縮放或傾斜。
-
語法:
-
transform: none|transform-functions:
transform屬性的初始值是none。
transform-functions設定變形函式。如translate ()移動元素、rotate ()旋轉元素、 scale()縮放元素、skew()傾斜元素等。
-
-
瀏覽器支援:
-
Internet Explorer 9 要求字首-ms-版本,Internet Explorer 10、 Firefox 和Opera 支援 transform 屬性。Chrome 和 Safari 低版本要求字首-webkit-版本。目前大部分瀏覽器都支援transform標準屬性。
-
-
2D 轉換
-
2D位移
-
通過 translate () 函式能夠重新定位元素的座標。
-
translate (x, y) 水平方向和垂直方向同時移動
-
translateX(x) 僅水平方向移動(X軸移動)
-
translateY(Y) 僅垂直方向移動(Y軸移動)
-
x、y為正數表示X、Y軸正向位移,負數為反向位移。
通過translate()方法,元素從其當前位置移動,根據給定的x座標和y座標
-
-
2D旋轉
-
通過rotate()函式能夠旋轉指定的元素物件。
-
rotate(*deg) 引數表示角度值,取值單位是度deg正數表示順時針旋轉,負數表示逆時針旋轉。
-
-
2D縮放
-
通過scale()函式能夠縮放元素大小。
-
scale (x, y) 水平方向和垂直方向同時縮放
-
scaleX(x) 僅水平方向(X軸)縮放
-
scaleY(Y) 僅垂直方向(Y軸)縮放
-
scale()函式傳遞不同引數時,縮放動畫的效果是不同的。引數為數值,可以是正數、 負數和小數,預設值為1;使用0到1之間的值縮小元素,使用超過1的值放大元素。負數 值則翻轉元素,然後再縮放元素。
-
-
2D傾斜
-
通過skew()函式能夠讓元素傾斜顯示。
-
skew(x,y) 水平方向和垂直方向同時傾斜
-
skewX(x) 僅水平方向(X軸)傾斜
-
skewY(Y) 僅垂直方向(Y軸)傾斜
-
-
-
定義變形原點
-
CSS變形原點預設為物件的中心點,如果要改變這個中心點,可以使用transform- origin 屬性進行定義。
-
transform-origin: x y;
transform-origin 接受兩個引數,引數為一個值時,另一個值預設為center;它們 可以是百分比、em、px等具體值;也可以是left、center、right或者top、center、 bottom等描述性關鍵字。transform-origin的初始值為50% 50%
-
-
3D 轉換
-
3D變形有3d位移、3d縮放、3d旋轉。3D的用法和2D差不多,只不過多了個Z軸的 值而己。注意skew扭曲是沒有3D的。
-
transform-style 屬性
-
規定如何在3D空間中呈現被巢狀的元素。該屬性必須與transform屬性一同使用。
-
flat 子元素將不保留其3D位置。
-
preserve-3d子元素將保留其3D位置。
-
注意:若同時設了 transform-style: preserve-3d;和overflow: hidden;, 3D 效果 將失效,等價於 transform-style: flat。
-
-
perspective 屬性
-
定義3D元素距檢視的距離,以畫素計算。當元素定義了 perspective屬性後,其 子元素會獲得透視效果,而不是元素本身。perspective屬性隻影響3D轉換元素。
-
number元素距離檢視的距離,以畫素計。
-
none 預設值,與0相同,不設定透視。
-
-
-
3D位移
-
在CSS3中,新増translateZ 3D位移函式。功能是讓元素在3D空間沿z軸進行位移。
-
translateZ( t ) t指的是z軸的向量位移長度。當其值為負值時,元素在Z軸越移越遠,導致元素變小。 反之當值為正值時,其在Z軸越移越近,導致元素變得較大。
-
translate3d(x, y, z)函式,可以同時設定元素在三個軸向的位移大小。
-
-
3D旋轉
-
CSS3中定義的3D 旋轉的函式有:rotateX、rotateY、rotateZ、rotate3d 等。
-
rotateX(a) a.指的是一個旋轉角度值,如果為正值,元素圍繞X軸順時針旋轉;反之,如果為負值, 元素圍繞X軸逆時針旋轉。
-
rotateY(a) a.指的是一個旋轉角度值,如果為正值,元素圍繞Y軸順時針旋轉;反之,如果為負值, 元素圍繞Y軸逆時針旋轉。
-
rotateZ(a) a.指的是一個旋轉角度值,如果為正值,元素圍繞Z軸順時針旋轉;反之,如果為負值, 元素圍繞Z軸逆時針旋轉。
-
rotate3d(x, y, z, angle)
-
x:是一個0到1之間的數值,主要用來描述元素圍繞X軸旋轉的向量值。
-
y:是一個0到1之間的數值,主要用來描述元素圍繞Y軸旋轉的向量值。
-
Z:是一個0到1之間的數值,主要用來描述元素圍繞Z軸旋轉的向量值。
-
angle: 一個角度值,指定在3D空間旋轉角度,正值順時針旋轉,反之元素逆時。
-
-
-
3D縮放
-
scaleZ(z);
-
-
CSS3動畫屬性
animation
定義動畫過程
@keyframes 動畫名稱{
0% {動畫開始
}
100% {動畫結束
}
}
-
animation-name 動畫名稱(自定義)
-
keyframe name 規定需要繫結到選擇器的keyframe的名稱。
-
none 規定無動畫效果(可用於覆蓋來自級聯的動畫)。
-
-
animation-duration 完成動畫的時間
-
time 規定完成動畫所花費的時間。預設值是0,意味著沒有動畫效果。
-
-
animation-timing-function 動畫完成曲線
-
linear 規定以相同速度開始至結束的過渡效果。
-
ease 規定慢速開始,然後變快,然後慢速結束的過渡效果。
-
ease-in 規定以慢速開始的過渡效果。
-
ease-out 規定以慢速結束的過渡效果。
-
ease-in-out 規定以慢速開始和結束的過渡效果。
-
-
animation-delay 延時
-
time 可選。定義動畫開始前等待的時間,以秒或毫秒計。預設值是0。
-
-
animation-iteration-count 動畫播放的次數
-
n 定義動畫播放次數的數值。
-
infinite 規定動畫應該無限次播放。
-
-
animation-direction 是否輪流反向
-
定義是否應該輪流反向播放動畫。如果animation-direction值是"alternate", 則動畫會在奇數次數(1、3、5等等)正常播放,而在偶數次數(2、4、6等等)向後播放。 注意:如果把動畫設定為只播放一次,則該屬性沒有效果。
-
alternate 輪流反向播放
-
normal 預設正常
-
-
animation-fill-mode 屬性規定動畫在播放之前或之後,其動畫效果是否可見。
-
none 不改變預設行為。
-
forwards 當動畫完成後,保持最後一個屬性值(在最後一個關鍵幀中定義)。
-
backwards 在 animation-delay 所指定的一段時間內,在動畫顯示之前,應用開始屬性值(在第一個關鍵幀中定義)。
-
both 向前和向後填充模式都被應用。
-
-
animation-play-state 屬性規定動畫正在執行還是暫停。
-
paused 規定動畫已暫停。
-
running 規定動畫正在播放。
-
-
-
動畫庫
-
https://daneden.github.io/animate.css/
<div class="animated bounce" id="" ></div> -
-