css動畫
函數(shù)matrix(n,n,n,n,n,n) 定義 2D 轉(zhuǎn)換痊硕,使用六個值的矩陣。
translate(x,y) 定義 2D 轉(zhuǎn)換,沿著 X 和 Y 軸移動元素盟萨。
translateX(n) 定義 2D 轉(zhuǎn)換,沿著 X 軸移動元素了讨。
translateY(n) 定義 2D 轉(zhuǎn)換捻激,沿著 Y 軸移動元素。
scale(x,y) 定義 2D 縮放轉(zhuǎn)換前计,改變元素的寬度和高度胞谭。
scaleX(n) 定義 2D 縮放轉(zhuǎn)換,改變元素的寬度男杈。
scaleY(n) 定義 2D 縮放轉(zhuǎn)換丈屹,改變元素的高度。
rotate(angle) 定義 2D 旋轉(zhuǎn)伶棒,在參數(shù)中規(guī)定角度旺垒。
skew(x-angle,y-angle) 定義 2D 傾斜轉(zhuǎn)換,沿著 X 和 Y 軸苞冯。
skewX(angle) 定義 2D 傾斜轉(zhuǎn)換袖牙,沿著 X 軸。
skewY(angle) 定義 2D 傾斜轉(zhuǎn)換舅锄,沿著 Y 軸鞭达。
過渡屬性
下面的表格列出了所有的轉(zhuǎn)換屬性:
transition 簡寫屬性司忱,用于在一個屬性中設(shè)置四個過渡屬性。
transition-property 規(guī)定應(yīng)用過渡的 CSS 屬性的名稱畴蹭。
transition-duration 定義過渡效果花費(fèi)的時間坦仍。默認(rèn)是 0。
transition-timing-function 規(guī)定過渡效果的時間曲線叨襟。默認(rèn)是 "ease"繁扎。
transition-delay 規(guī)定過渡效果何時開始。默認(rèn)是 0糊闽。
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3過渡動畫</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: gold;
transition: /width 500ms ease,height 500ms ease 500ms/all 500ms ease;
}
.box:hover{
width: 500px;
height: 300px;
background-color: red;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
效果