一、分享目的
- 普及CSS基礎(chǔ)知識(shí)
- 介紹CSS3基礎(chǔ)及動(dòng)畫相關(guān)熟悉
- 通過(guò)分析iceland首頁(yè)動(dòng)畫源碼潘懊，介紹使用CSS3動(dòng)畫屬性
- 最終目的：讓大家了解逼纸，什么樣的動(dòng)畫和動(dòng)效，前端能使用CSS3寫出來(lái)剑按。
二、什么是CSS
以下是官方解釋：
- CSS 指層疊樣式表 (Cascading Style Sheets)
- 樣式定義如何顯示 HTML 元素
- 樣式通常存儲(chǔ)在樣式表中
- 把樣式添加到 HTML 4.0 中澜术，是為了解決內(nèi)容與表現(xiàn)分離的問(wèn)題
- 外部樣式表可以極大提高工作效率
- 外部樣式表通常存儲(chǔ)在 CSS 文件中
- 多個(gè)樣式定義可層疊為一
問(wèn)題：
層疊 如何理解艺蝴？
關(guān)鍵詞：權(quán)重 繼承
CSS層疊性是指CSS樣式在針對(duì)同一元素配置同一屬性時(shí)，依據(jù)層疊規(guī)則（權(quán)重）來(lái)處理沖突鸟废，選擇應(yīng)用權(quán)重高的CSS選擇器所指定的屬性猜敢，一般也被描述為權(quán)重高的覆蓋權(quán)重低的，因此也稱作層疊盒延。
通用選擇器（*） < 元素(類型)選擇器 < 類選擇器 < 屬性選擇器 < 偽類 < ID 選擇器 <內(nèi)聯(lián)樣式
//btn在被鼠標(biāo)hover的時(shí)候缩擂，背景會(huì)變?yōu)榘咨?.btn{
background:red;
}
.btn:hover{
background:white;
}
css語(yǔ)法
selector { //選擇器
property1:value1;//屬性:值 --> 聲明
property2:value2;
}
三、什么是CSS3
CSS3是CSS技術(shù)的升級(jí)版本添寺，CSS3語(yǔ)言開發(fā)是朝著模塊化發(fā)展的胯盯。以前的規(guī)范作為一個(gè)模塊實(shí)在是太龐大而且比較復(fù)雜，所以计露，把它分解為一些小的模塊博脑，更多新的模塊也被加入進(jìn)來(lái)楞捂。這些模塊包括： 盒子模型、列表模塊趋厉、超鏈接方式 寨闹、語(yǔ)言模塊 、背景和邊框 君账、文字特效 繁堡、多欄布局等。
說(shuō)人話就是：最新的css標(biāo)準(zhǔn)乡数。
模塊包括：
- 選擇器
- 盒模型
- 背景和邊框
- 文字特效
- 2D/3D轉(zhuǎn)換
- 動(dòng)畫
- 多列布局
- 用戶界面
四椭蹄、不知不覺使用的CSS3
在平時(shí)的生產(chǎn)實(shí)踐中，我們已經(jīng)大量使用css3屬性净赴，如下所示：
//圓角
border-radius
//投影
box-shadow
//背景
background-image
background-size
background-origin
background-clip
//漸變
background: linear-gradient(direction, color-stop1, color-stop2, ...);
//框大小
box-sizing: border-box;
五绳矩、轉(zhuǎn)換和過(guò)渡——我們要的動(dòng)效
1）主要方法
transform 向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換
transform-origin 允許你改變被轉(zhuǎn)換元素的位置。
transform-style 規(guī)定被嵌套元素如何在 3D 空間中顯示玖翅。
perspective 規(guī)定 3D 元素的透視效果翼馆。 demo
perspective-origin 規(guī)定 3D 元素的底部位置。
backface-visibility 定義元素在不面對(duì)屏幕時(shí)是否可見金度。demo（背面可以設(shè)置不可見）
2）2D 轉(zhuǎn)換
translate(x,y) 沿著 X 和 Y 軸移動(dòng)元素应媚。
translateX(n) 沿著 X 軸移動(dòng)元素。
translateY(n) 沿著 Y 軸移動(dòng)元素猜极。
scale(x,y) 改變?cè)氐膶挾群透叨取?br>
scaleX(n) 改變?cè)氐膶挾取?br>
scaleY(n) 改變?cè)氐母叨取?br>
rotate(angle) 在參數(shù)中規(guī)定角度中姜。
skew(x-angle,y-angle) 沿著 X 和 Y 軸。
skewX(angle) 沿著 X 軸跟伏。
skewY(angle) 沿著 Y 軸丢胚。
3）3D轉(zhuǎn)換
translate3d(x,y,z) 定義 3D 轉(zhuǎn)化。
scale3d(x,y,z) 定義 3D 縮放轉(zhuǎn)換受扳。
rotate3d(x,y,z,angle) 定義 3D 旋轉(zhuǎn)携龟。
用法是
transform : translate(20px,30px); （移動(dòng)x：20px，y：30px）
transform : scale(2); 擴(kuò)大2倍
4）過(guò)渡
transition-property: width; //應(yīng)用過(guò)渡的css名詞 辞色，如果寫all 代表屬性都變換
transition-duration: 1s; //過(guò)渡效果花費(fèi)的時(shí)間
transition-timing-function: linear; //規(guī)定過(guò)渡效果時(shí)間曲線骨宠，默認(rèn)ease
transition-delay: 2s; //過(guò)渡效果開始時(shí)間浮定，默認(rèn)0
//也可以簡(jiǎn)寫為：
transition: width 1s linear 2s;
六相满、動(dòng)畫
css3動(dòng)畫，主要是用animation桦卒，看以下范例立美。
div{
animation-name: myfirst; //動(dòng)畫名稱
animation-duration: 5s; //一個(gè)周期的時(shí)間
animation-timing-function: linear; //速度曲線
animation-delay: 2s; //規(guī)定動(dòng)畫何時(shí)開始
animation-iteration-count: infinite; //規(guī)定動(dòng)畫循環(huán)次數(shù)
animation-direction: alternate; //規(guī)定動(dòng)畫下周期是否逆向
animation-play-state: running; //運(yùn)行或暫停
//可以簡(jiǎn)寫為
animation: myfirst 5s linear 2s infinite alternate;
}
//改變顏色和位置
@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
接下來(lái)，我們對(duì)照iceland首頁(yè)動(dòng)畫源碼方灾，解釋css3動(dòng)畫的使用建蹄。
七碌更、兼容性和性能
兼容性和性能，是我們必須要考慮的洞慎。
靜態(tài)資源大小痛单，cpu、內(nèi)存消耗率等重要因素也是考慮范圍劲腿。
兼容性方面
animation IE9以上
transform 2d/3d 部分屬性旭绒，支持IE9、10以上
近3個(gè)月的瀏覽器使用情況統(tǒng)計(jì)焦人，大部分的瀏覽器挥吵，均可得到動(dòng)畫體驗(yàn)。當(dāng)然花椭，IE瀏覽器是老大難問(wèn)題忽匈。不過(guò)隨著時(shí)間的推移，IE 8 9都將推出歷史舞臺(tái)（穩(wěn)住就是勝利）矿辽。
總之丹允，在高級(jí)瀏覽器上，css3動(dòng)畫袋倔，能使用更少的資源嫌松，得到很好效果。
CSS3動(dòng)畫性能方面注意：
- 盡可能多的利用硬件能力（3D變形會(huì)消耗更多的內(nèi)存與功耗奕污，應(yīng)確實(shí)有性能問(wèn)題時(shí)才去使用它萎羔，兼在權(quán)衡）
- 盡可能少的使用box-shadows與gradients
- 盡可能的讓動(dòng)畫元素不在文檔流中，以減少重排
- CSS屬性在CSS動(dòng)畫中行為表
