關鍵幀 屬性 平移 ID 位移 ide 效果 速度 style

一.CSS3變形 CSS3變形是一些效果的集合
如平移、旋轉、縮放、傾斜效果
每個效果都可以稱為變形（transform），它們可以分別操控元素發生平移、旋轉、縮放、傾斜等變化 二.CSS3位移:translate <style type="text/css"> li a:hover{
transform: translate(10px,10px);
transform: translateX(10px);
transform: translateY(10px);
} </style> 三.CSS3的縮放scale transform: scale(縮放倍數); <style type="text/css">
li a:hover{
transform: scale(0.5);
}
</style>
四.CSS3的傾斜skew
transform: skew(-10deg,-30deg);
<style type="text/css">
li a:hover{
transform: skew(-10deg,-30deg);
}
</style>
五.CSS3的旋轉rotate
transform: rotate(361deg);
<style type="text/css">
img:hover{
transform: rotate(361deg);
}
</style>
※當想使用多個函數的話那麽每個函數中間用空格分割 六.CSS的過度 transition: 過度屬性 過度完成時間 過渡動畫函數 過度延遲時間;
1.過渡屬性（ transition-property ）

定義轉換動畫的CSS屬性名稱
IDENT：指定的CSS屬性（width、height、background-color屬性等）
all：指定所有元素支持transition-property屬性的樣式，一般為了方便都會使用all
2.過渡所需的時間（ transition-duration ）
定義轉換動畫的時間長度，即從設置舊屬性到換新屬性所花費的時間，單位為秒（s）
3.過渡動畫函數（ transition-timing-function ）
指定瀏覽器的過渡速度，以及過渡期間的操作進展情況，通過給過渡添加一個函數來指定動畫的快慢方式
ease：速度由快到慢（默認值）
linear：速度恒速（勻速運動）
ease-in：速度越來越快（漸顯效果）
ease-out：速度越來越慢（漸隱效果）
ease-in-out：速度先加速再減速（漸顯漸隱效果）
4.過渡延遲時間（ transition-delay ）
指定一個動畫開始執行的時間，當改變元素屬性值後多長時間去執行過渡效果
正值：元素過渡效果不會立即觸發，當過了設置的時間值後才會被觸發
負值：元素過渡效果會從該時間點開始顯示，之前的動作被截斷
0：默認值，元素過渡效果立即執行
<style type="text/css">
li img{
transition: all 0.1s ease-in 1s;
}
li img:hover{
transform: rotate(360deg) scale(1.5);
} </style> 七.CSS的動畫 1./*聲明關鍵幀*/
@keyframes S1303 {
0%{
width: 10px;
transform: translate(100px,0);
}
20%{
width: 20px;
transform: translate(200px,0);
}
40%{
width: 30px;
transform: translate(300px,0);
}
60%{
width: 40px;
transform: translate(400px,0);
}
80%{
width: 50px;
transform: translate(500px,0);
}
100%{
width: 60px;
transform: translate(600px,0);
}
}
2.調用關鍵幀
animation: 關鍵幀名稱 過度時間 播放速度 播放次數;
animation: S1303 2s linear infinite;

第九章 利用CSS3制作網頁動畫