2D變形
CSS3所提供的動畫功能主要包括變形、轉換和動畫技術。變形是最基本的動畫形式,它主要通過CSS控制元素樣式屬性值的變化來實現。利用transform功能來實現文字或圖像的旋轉、縮放、傾斜和移動這4種類型的變形處理。
transform實現了一些可用SVG實現的變形功能,transform屬性的基本語法如下所示:
transform:none|<transform-function>[<transform-function>];
transform-function設置變形函數:matrix()、scale()、translate()、totate()、skew()。
rotate(<angle>)函數用法
scale()函數能夠縮放元素大小,語法格式:scale(<number>);number參數值可以是正數、負數和小數。
translate()函數能夠重新定位元素的坐標,語法格式如下:translate(<translation-value>);
skew()函數能夠讓元素傾斜顯示,會改變元素的形狀,語法格式如下:skew(<angle>);
matrix()是矩陣函數,調用該函數可以非常靈活地實現各種變形效果。語法格式如下:
matrix(<number>,<number>,<number>,<number>,<number>,<number>);
CSS變形的原點默認為對象的中心點,如果要改變這個中心點,可以使用transform-origin屬性進行定義。transform-origin屬性的初始值為“50% 50%”,適用於塊狀元素和內聯元素,transform-origin接受兩個參數,可以是百分比、em、px等具體的值,也可以是left、center、right,或者top、middle、bottom等描述性關鍵字。
CSStransformation和CSS transition是兩種不同的動畫模型。
transition屬性是一個復合屬性,可以同時定義transition-property、transitionduration、transition-timing-function、transition-delay、transition-property、transition-duration、transition-timing-function和transition-delay子屬性值。
transition-property屬性用來定義轉換動畫的CSS屬性名稱。
transition-duration屬性用來定義轉換動畫的時間長度,即設置從舊屬性換到新屬性花費的時間,單位為秒。
transition-delay屬性用來定義過渡動畫的延遲時間。
transition-timing-function屬性用來定義過渡動畫的效果,初始值為ease。
- ease:緩解效果,等同於cubic-bezier(0.25,0.1,0.25,1.0)函數,即立方貝塞爾。
- linear:線性效果,等同於cubic-bezier(0.0,0.0,1.0,1.0)函數。
- ease-in:漸顯效果,等同於cubic-bezier(0.42,0,1.0,1.0)函數。
- ease-out:漸隱效果,等同於cubic-bezier(0,0,0.58,1.0)函數。
- ease-in-out:漸顯漸隱效果,等同於cubic-bezier(0.42,0,0.58,1.0)函數。
- cubic-bezier:特殊的立方貝塞爾曲線效果。
animation屬性是一個復合屬性,它包含了animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction子屬性值。
animation-name屬性可以定義CSS動畫的名稱,初始值為none。
animation-duration屬性定義CSS動畫的播放時間,初始值為0。
animation-timing-function屬性定義CSS動畫的播放方式,初始值為ease。
animation-delay屬性可以定義CSS動畫延遲播放時間,初始值為0。
animation-iteration-count屬性定義CSS動畫的播放次數,初始值為1,infinite表示無限次。
animation-direction屬性定義CSS動畫的播放方向,初始值為normal,另一個值為alternate。
2D變形