一.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;

作業：
1.第九章上機練習和簡答
2.第九章博客
3.日記
4.第九章筆記
5.HTML復習內容準備：

5.1 初始HTML 張星辰
5.2 列表表格與媒體元素 任自彬
5.3 表單 史智慧
5.4 初始CSS 王葉鵬
5.5 css美化網頁元素 陳璟瑜
5.6 盒子模型 趙賀賀
5.7 浮動 支佳寧
5.8 定位網頁元素 蔡懷鑫
5.9 css3制作網頁動畫 佟超飛
5.10 準備1-9章所有課後簡答題以及選擇題 祝願
5.11 1-9章總結 楊金川（從第一張開始到第九章結束，所有技能點要說一遍還有重要代碼上機）

準備PPT，謝謝大家，不用客氣，我很仁慈的...

css3制作網頁動畫