css3-transform動畫樣式
阿新 • • 發佈:2019-01-02
1、轉換
2、過渡
3、動畫
4、CSS優化
1、轉換
1、什麼是轉換
轉換即改變元素的一些狀態,大小、位置、形狀
可以是2d轉換,也可以是3d的轉換
2d : 使元素在 x軸和 y軸上發生變化
3d :2d基礎上增加了 z軸的變化
2、轉換屬性
CSS3轉換屬性:
transform : none / transform-function;
none:不轉換,預設值
transform-function:表示要實現轉換的函式
旋轉:rotate()
位移:translate()
縮放:scale()
transform:rotate(旋轉度數xxxdeg); -- 旋轉操作
3、轉換原點:
轉換原點:即轉換過程中圍繞的中心點。
預設情況下,原點是在整個元素的中間處
更改轉換原點:
transform-origin:
取值 :
數值 :以元素左上方的點為(0,0),再去計算其他點
百分比:
0% , 0% : 左上方的點
50% , 50% :元素的中心點
關鍵字:
left
right
top
bottom
center
left top : 表示左上方
transform-origin賦值:
一個值 :x軸的移動
兩個值 :x軸和y軸
三個值 :x軸,y軸,z軸
2、2D轉換 - 位移
位移:位置移動
從當前元素的位置處,移動到指定座標軸位置處
函式:
translate(x,y)
translate(value);
取值:
數值、百分比
去賦值
x :正 向右移動
負 向左移動
y : 正 向下移動
負 向上移動
單方向位移:
translateX(x)
translateY(y)
3、2D轉換 - 縮放
縮放:改變元素大小
函式:scale(value)
scale(x,y)
取值:
預設值 1
縮小:0 - 1 之間的小數
放大:大於1
scaleX(x) : 橫向縮放
scaleY(y) : 縱向縮放
4、2D轉換 - 旋轉
圍繞著指定點,按照指定的角度發生的旋轉
函式:rotate(-90deg)
取值:deg 為角度 0-360
預設為順時針旋轉
deg取值為負的話,則將逆時針旋轉
5、2D轉換 - 傾斜
函式:skew()
取值 :為角度
skewX(x)
skewY(y)
6、3D轉換
屬性:
perspective : 設定假定人眼到投影平面的距離
隻影響3D元素,不影響2D元素
設定位置:加在父元素上,設定好後,其子元素就可以完成3D的轉換。
1、3d位移
改變元素在z軸上的位置
屬性:transform:
函式:translateZ(z);
translate3d(x,y,z);
2、3d旋轉
屬性:transform
函式:
rotateX(deg);
rotateY(deg);
rotateZ(deg)
rotate3d(x,y,z,deg);
x,y,z : 取值為 1,0,-1
rotate3d(-1,0,1,45deg);
****************************************************
1、過渡
1、什麼是過渡
元素從一個【狀態】到另外一個【狀態】的【平滑變換】【過程】
2、過渡屬性
transition
3、過渡4要素(子屬性)
1、過渡屬性
元素的哪個【狀態】發生變化時要使用過渡的效果
當指定的屬性發生改變時,就會觸發過渡效果
語法:
transition-property:none | all | property
transition-property:background;
2、過渡時間
整個過渡效果在多長時間內完成,以 秒(s)或毫秒(ms)為單位
語法:
transition-duration: s|ms;
transition-duration:1s;
注意:
過渡時間預設為 0 ,如果為0時,則沒有過渡的效果產生。
如果想看到過渡效果,則必須設定該屬性。
3、過渡函式
指定時間內(transition-duration)過渡的速度效果。
語法:
transition-timing-function
取值:
ease : 預設值,慢速開始,速度變快,慢速結束
linear:勻速開始到結束
ease-in:慢速開始,加速效果(由慢到快)
ease-out:慢速結束,減速效果(由快到慢)
ease-in-out:以慢速開始和結束,先加速再減速
4、過渡延遲
當過渡操作被激發後,等待多長時間後才開始執行效果
語法:transition-delay
以秒或毫秒作為單位
5、統一設定過渡效果
屬性:
transition:
用於設定四個過渡子屬性
transition:transition-property transition-duration transition-timing-function transition-delay;
transition:width 2s linear 0s;
transition:prop dura timing delay;
4、觸發過渡
過渡效果由使用者的行為進行觸發(點選、滑鼠懸停)
4、多個過渡效果
transition-property:prop1,prop2;
transition-duration:t1,t2;
transition-timing-function:fun1,fun2;
transition-delay:delay1,delay2;
2、動畫
1、什麼是動畫
將元素的多個狀態放在一起進行執行(多個狀態間的轉換)
過渡:實現簡單的動態效果
動畫:實現複雜的動態效果
注意:瀏覽器相容性
Chrome 和 Safari : -webkit-
Firefox : -moz-
Opera : -o-
實現動畫的步驟:
1、宣告動畫
@keyframes
宣告整個動畫過程中的不同狀態都是什麼
2、呼叫動畫
通過 animation 屬性 呼叫已宣告動畫
2、關鍵幀
語法:@keyframes 規則宣告動畫
<style>
@keyframes 動畫名稱{
/*定義關鍵幀即不同時間點上的動畫狀態*/
from | 0%{
/*動畫的開始狀態(樣式)*/
}
/*...若干關鍵幀*/
20%{
/*動畫在執行到20%的時候的狀態(樣式)*/
}
25%{
}
26%{
}
to | 100%{
/*動畫結束時候的狀態(樣式)*/
}
}
changeBack{
}
@-moz-keyframes changeBack{
}
@-o-keyframes changeBack{
}
</style>
3、動畫屬性(呼叫)
1、animation-name : 呼叫動畫的名稱,指定 @keyframes 的名字
2、animation-duration:動畫執行的時常以 s或ms
3、animation-timing-function:動畫執行時的速度效果
取值 ease,linear,ease-in,ease-out,ease-in-out
4、animation-delay:延遲時間,以s或ms為單位
5、animation-iteration-count
動畫執行的次數
取值 :
1、具體數值
2、infinite : 無限次播放
6、animation-direction : 動畫播放方向
取值:
normal
alternate :
奇數次播放為正向播放(狀態從from - to)
偶數次播放為逆向播放(狀態從to - from)
7、動畫綜合屬性 : animation
ainimation:name duration timing-function delay iteration-count direction;
ainimation:second 2s linear 2s infinite;
8、animation-fill-mode
指定動畫在播放之前或之後的效果
none : 預設行為
forwards:動畫完成後,保持最後一個狀態
backwards : 動畫顯示之前,保持在第一個狀態
both:動畫完成後,動畫顯示前,都被相應的狀態所保持著。
9、animation-play-state
定義動畫播放狀態
配合著 Javascript使用,用於播放過程中暫停動畫
取值:
paused :暫停
running :播放
2、過渡
3、動畫
4、CSS優化
1、轉換
1、什麼是轉換
轉換即改變元素的一些狀態,大小、位置、形狀
可以是2d轉換,也可以是3d的轉換
2d : 使元素在 x軸和 y軸上發生變化
3d :2d基礎上增加了 z軸的變化
2、轉換屬性
CSS3轉換屬性:
transform : none / transform-function;
none:不轉換,預設值
transform-function:表示要實現轉換的函式
旋轉:rotate()
位移:translate()
縮放:scale()
transform:rotate(旋轉度數xxxdeg); -- 旋轉操作
3、轉換原點:
轉換原點:即轉換過程中圍繞的中心點。
預設情況下,原點是在整個元素的中間處
更改轉換原點:
transform-origin:
取值 :
數值 :以元素左上方的點為(0,0),再去計算其他點
百分比:
0% , 0% : 左上方的點
50% , 50% :元素的中心點
關鍵字:
left
right
top
bottom
center
left top : 表示左上方
transform-origin賦值:
一個值 :x軸的移動
兩個值 :x軸和y軸
三個值 :x軸,y軸,z軸
2、2D轉換 - 位移
位移:位置移動
從當前元素的位置處,移動到指定座標軸位置處
函式:
translate(x,y)
translate(value);
取值:
數值、百分比
去賦值
x :正 向右移動
負 向左移動
y : 正 向下移動
負 向上移動
單方向位移:
translateX(x)
translateY(y)
3、2D轉換 - 縮放
縮放:改變元素大小
函式:scale(value)
scale(x,y)
取值:
預設值 1
縮小:0 - 1 之間的小數
放大:大於1
scaleX(x) : 橫向縮放
scaleY(y) : 縱向縮放
4、2D轉換 - 旋轉
圍繞著指定點,按照指定的角度發生的旋轉
函式:rotate(-90deg)
取值:deg 為角度 0-360
預設為順時針旋轉
deg取值為負的話,則將逆時針旋轉
5、2D轉換 - 傾斜
函式:skew()
取值 :為角度
skewX(x)
skewY(y)
6、3D轉換
屬性:
perspective : 設定假定人眼到投影平面的距離
隻影響3D元素,不影響2D元素
設定位置:加在父元素上,設定好後,其子元素就可以完成3D的轉換。
1、3d位移
改變元素在z軸上的位置
屬性:transform:
函式:translateZ(z);
translate3d(x,y,z);
2、3d旋轉
屬性:transform
函式:
rotateX(deg);
rotateY(deg);
rotateZ(deg)
rotate3d(x,y,z,deg);
x,y,z : 取值為 1,0,-1
rotate3d(-1,0,1,45deg);
****************************************************
1、過渡
1、什麼是過渡
元素從一個【狀態】到另外一個【狀態】的【平滑變換】【過程】
2、過渡屬性
transition
3、過渡4要素(子屬性)
1、過渡屬性
元素的哪個【狀態】發生變化時要使用過渡的效果
當指定的屬性發生改變時,就會觸發過渡效果
語法:
transition-property:none | all | property
transition-property:background;
2、過渡時間
整個過渡效果在多長時間內完成,以 秒(s)或毫秒(ms)為單位
語法:
transition-duration: s|ms;
transition-duration:1s;
注意:
過渡時間預設為 0 ,如果為0時,則沒有過渡的效果產生。
如果想看到過渡效果,則必須設定該屬性。
3、過渡函式
指定時間內(transition-duration)過渡的速度效果。
語法:
transition-timing-function
取值:
ease : 預設值,慢速開始,速度變快,慢速結束
linear:勻速開始到結束
ease-in:慢速開始,加速效果(由慢到快)
ease-out:慢速結束,減速效果(由快到慢)
ease-in-out:以慢速開始和結束,先加速再減速
4、過渡延遲
當過渡操作被激發後,等待多長時間後才開始執行效果
語法:transition-delay
以秒或毫秒作為單位
5、統一設定過渡效果
屬性:
transition:
用於設定四個過渡子屬性
transition:transition-property transition-duration transition-timing-function transition-delay;
transition:width 2s linear 0s;
transition:prop dura timing delay;
4、觸發過渡
過渡效果由使用者的行為進行觸發(點選、滑鼠懸停)
4、多個過渡效果
transition-property:prop1,prop2;
transition-duration:t1,t2;
transition-timing-function:fun1,fun2;
transition-delay:delay1,delay2;
2、動畫
1、什麼是動畫
將元素的多個狀態放在一起進行執行(多個狀態間的轉換)
過渡:實現簡單的動態效果
動畫:實現複雜的動態效果
注意:瀏覽器相容性
Chrome 和 Safari : -webkit-
Firefox : -moz-
Opera : -o-
實現動畫的步驟:
1、宣告動畫
@keyframes
宣告整個動畫過程中的不同狀態都是什麼
2、呼叫動畫
通過 animation 屬性 呼叫已宣告動畫
2、關鍵幀
語法:@keyframes 規則宣告動畫
<style>
@keyframes 動畫名稱{
/*定義關鍵幀即不同時間點上的動畫狀態*/
from | 0%{
/*動畫的開始狀態(樣式)*/
}
/*...若干關鍵幀*/
20%{
/*動畫在執行到20%的時候的狀態(樣式)*/
}
25%{
}
26%{
}
to | 100%{
/*動畫結束時候的狀態(樣式)*/
}
}
changeBack{
}
@-moz-keyframes changeBack{
}
@-o-keyframes changeBack{
}
</style>
3、動畫屬性(呼叫)
1、animation-name : 呼叫動畫的名稱,指定 @keyframes 的名字
2、animation-duration:動畫執行的時常以 s或ms
3、animation-timing-function:動畫執行時的速度效果
取值 ease,linear,ease-in,ease-out,ease-in-out
4、animation-delay:延遲時間,以s或ms為單位
5、animation-iteration-count
動畫執行的次數
取值 :
1、具體數值
2、infinite : 無限次播放
6、animation-direction : 動畫播放方向
取值:
normal
alternate :
奇數次播放為正向播放(狀態從from - to)
偶數次播放為逆向播放(狀態從to - from)
7、動畫綜合屬性 : animation
ainimation:name duration timing-function delay iteration-count direction;
ainimation:second 2s linear 2s infinite;
8、animation-fill-mode
指定動畫在播放之前或之後的效果
none : 預設行為
forwards:動畫完成後,保持最後一個狀態
backwards : 動畫顯示之前,保持在第一個狀態
both:動畫完成後,動畫顯示前,都被相應的狀態所保持著。
9、animation-play-state
定義動畫播放狀態
配合著 Javascript使用,用於播放過程中暫停動畫
取值:
paused :暫停
running :播放