作者:blue(又名一書(shū)and一世界) 我的github
**用途: **當(dāng)作字典來(lái)查
some websites to learn css3Animate
- css3動(dòng)畫(huà)文檔 by W3CSchool
- css3動(dòng)畫(huà)簡(jiǎn)介 by阮一峰
- css3動(dòng)畫(huà)手冊(cè) by 騰訊 isux
- css3動(dòng)畫(huà)之硬件加速 by w3cplus
- 調(diào)試css3 動(dòng)畫(huà) keyframe by w3ctech
- css動(dòng)畫(huà)的性能優(yōu)化 by zencode.in
- 瀏覽器是如何渲染頁(yè)面的 by code.leozhang2018.me (讀完了之后會(huì)更加懂得如何提升css動(dòng)畫(huà)性能)
- 前端開(kāi)發(fā)體系建設(shè)日記 by 張?jiān)讫?（這個(gè)鏈接是作為拓展的）
transition
- grammar: tansition: property duration timing-function delay;
- detail
- transition-property：要過(guò)渡的css屬性
- transition-duration：要過(guò)渡持續(xù)多少秒或者毫秒
- transition-timing-function：速度效果的速度曲線
- transition-delay：延遲多少秒執(zhí)行過(guò)渡
- notice
- 默認(rèn)值：transition:all 0 ease 0
- 如果transition-duration屬性沒(méi)有被設(shè)置土陪，則默認(rèn)為0臣嚣，即不會(huì)產(chǎn)生過(guò)渡效果
- tanstion-timing-function: linear/勻速/ | ease-in /加速/ | ease-out /減速/ | ease /逐漸放慢/ | cubic-bezier /函數(shù)，自定義速度模式，可以使用 工具網(wǎng)站 這個(gè)網(wǎng)站制作/
- compatibility
- 目前谓着，各大瀏覽器（包括IE 10）都已經(jīng)支持無(wú)前綴的transition袜茧，所以transition已經(jīng)可以很安全地不加瀏覽器前綴途凫。
- 不是所有的CSS屬性都支持transition危纫，完整的列表查看這里，以及具體的效果掰派。
- transition需要明確知道从诲，開(kāi)始狀態(tài)和結(jié)束狀態(tài)的具體數(shù)值，才能計(jì)算出中間狀態(tài)靡羡。比如系洛，height從0px變化到100px俊性，transition可以算出中間狀態(tài)。但是碎罚，transition沒(méi)法算出0px到auto的中間狀態(tài)磅废，也就是說(shuō)，如果開(kāi)始或結(jié)束的設(shè)置是height: auto荆烈，那么就不會(huì)產(chǎn)生動(dòng)畫(huà)效果。類似的情況還有竟趾，display: none到block憔购，background: url(foo.jpg)到url(bar.jpg)等等。
- advantage : 簡(jiǎn)單易用
- disavantage
- transition需要事件觸發(fā)岔帽，所以沒(méi)法在網(wǎng)頁(yè)加載時(shí)自動(dòng)發(fā)生玫鸟。
- transition是一次性的，不能重復(fù)發(fā)生犀勒，除非一再觸發(fā)屎飘。
- transition只能定義開(kāi)始狀態(tài)和結(jié)束狀態(tài)，不能定義中間狀態(tài)贾费，也就是說(shuō)只有兩個(gè)狀態(tài)钦购。
- 一條transition規(guī)則，只能定義一個(gè)屬性的變化褂萧，不能涉及多個(gè)屬性押桃。
animation
- grammar: name duration timing-function delay iteration-count direction
- detail
- @keyframes：規(guī)定動(dòng)畫(huà)
- animation-name：綁定選擇器的keyframe名稱
- animation-duration：動(dòng)畫(huà)的持續(xù)時(shí)間，以秒或者毫秒計(jì)
- animation-timing-function：動(dòng)畫(huà)的速度曲線
- animation-delay：延遲多少秒執(zhí)行動(dòng)畫(huà)
- animation-iteration-count：動(dòng)畫(huà)播放次數(shù)
- animation-diretion：是否應(yīng)該輪流反向播放動(dòng)畫(huà)
- animation-play-state(通常用在js控制是否播放,object.style.animationPlayState)：（paused[停止] | running[播放]）規(guī)定動(dòng)畫(huà)正在播放還是暫停
- animation-fill-mode(通常用在js控制動(dòng)畫(huà)效果是否可見(jiàn),object.style.animationFillMode)：（none[不改變默認(rèn)行為] | forwards[當(dāng)動(dòng)畫(huà)完成后导犹，保持最后一個(gè)屬性值] | backwards[在animation-delay 所制定的一段時(shí)間內(nèi)唱凯，在動(dòng)畫(huà)顯示之前，應(yīng)該開(kāi)始屬性值] | both[向前和向后填充模式都被應(yīng)用]）規(guī)定動(dòng)畫(huà)在播放之前或之后谎痢，其動(dòng)畫(huà)效果是否可見(jiàn)磕昼。
- compatibility
- Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 規(guī)則和 animation 屬性节猿。Chrome 和 Safari 需要前綴 -webkit-
- Internet Explorer 9票从，以及更早的版本，不支持 @keyframe 規(guī)則或 animation 屬性
- notice
- 默認(rèn)值：animation:none 0 ease 0 1 normal
- 盡量少在@keyframe里使用除了transform,opacity,filter以外的元素沐批，因?yàn)闀?huì)觸發(fā)瀏覽器的重繪(repaint)詳情
- @keyframe
- 定義：以百分比來(lái)規(guī)定改變發(fā)生的時(shí)間纫骑，或者通過(guò)關(guān)鍵詞"from" 和 "to"，等價(jià)于0%和100%九孩，0%是動(dòng)畫(huà)的開(kāi)始時(shí)間先馆，100%是結(jié)束時(shí)間
- grammar:@keyframes animationname{ keyframes-selector { css-styles;} }
- detail
- animationname：（必需）定義動(dòng)畫(huà)名稱
- keyframes-selector：（必需）動(dòng)畫(huà)時(shí)長(zhǎng)的百分比，合法的值：0%-100%（可以使用 from[0%] 和 to[100%]）
- css-styles：（必需）一個(gè)或多個(gè)合法的css樣式屬性
- example
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-webkit-keyframes mymove /* Safari 和 Chrome */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-o-keyframes mymove /* Opera */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
- 如果animation-duration屬性沒(méi)有設(shè)置躺彬，則時(shí)長(zhǎng)為0煤墙，即動(dòng)畫(huà)不會(huì)被播放
- animation-iteration-count默認(rèn)值為1梅惯，可設(shè)置為infinite（無(wú)限次播放）
- animation-direction:normal /正常播放/ | alternate /輪流反向播放/
- advantage ：解決了transition過(guò)渡效果不能循環(huán)播放的弊端
- disvantage：目前，IE 10和Firefox（>= 16）支持沒(méi)有前綴的animation仿野，而chrome不支持铣减，所以必須使用webkit前綴。代碼必須寫(xiě)成下面這樣脚作。
div:hover {
-webkit-animation: 1s rainbow;
animation: 1s rainbow;
}
@-webkit-keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
@keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
transform
- grammar:transform:none | transform-functions
- detail:none and transform-functions
- none：不定義轉(zhuǎn)換
- matrix(n,n,n,n,n,n)：定義2D轉(zhuǎn)換葫哗，使用六個(gè)值的矩陣
- matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)：定義3D轉(zhuǎn)換，使用16個(gè)值的4X4矩陣
- translate(x,y)：定義2D轉(zhuǎn)換（參數(shù)：x軸移動(dòng)量球涛，y軸移動(dòng)量劣针。+即向右移動(dòng)，-即向左移動(dòng)亿扁。單獨(dú)一個(gè)量時(shí)表示x軸移動(dòng)量與y軸移動(dòng)量相等）
- translate3d(x,y,z)：定義3D轉(zhuǎn)換（參數(shù)基于translate(x,y)擴(kuò)展）
- translateX(x)：定義轉(zhuǎn)換捺典，只用于X軸的值
- translateY(y)：定義轉(zhuǎn)換，只用于Y軸的值
- translateZ(z)：定義轉(zhuǎn)換从祝，只用于Z軸的值
- scale(x,y)：定義2D縮放轉(zhuǎn)換（參數(shù)x,y是倍數(shù)）
- scale(x,y,z)：定義3D縮放轉(zhuǎn)換（參數(shù)基于scale(x,y)擴(kuò)展）
- scaleX(x)：設(shè)置X軸的值來(lái)定義縮放轉(zhuǎn)換
- scaleY(y)：設(shè)置Y軸的值來(lái)定義縮放轉(zhuǎn)換
- scaleZ(z)：設(shè)置Z軸的值來(lái)定義縮放轉(zhuǎn)換
- rotate(angle)：定義2D旋轉(zhuǎn)襟己。在參數(shù)中規(guī)定角度（正是順時(shí)針，負(fù)是逆時(shí)針）
- rotate3d(x,y,z,angle)：定義3D旋轉(zhuǎn)
- rotateX(angle)：定義沿著X軸的3D旋轉(zhuǎn)
- rotateY(angle)：定義沿著Y軸的3D旋轉(zhuǎn)
- rotateZ(angle)：定義沿著Z軸的3D旋轉(zhuǎn)
- skew(x-angle,y-angle)：定義沿著X和Y軸的2D傾斜轉(zhuǎn)換
- skew(angle)：定義沿著X軸的2D傾斜轉(zhuǎn)換
- skew(angle)：定義沿著Y軸的2D傾斜轉(zhuǎn)換
- perspective(n)：為3D轉(zhuǎn)換元素定義透視視圖
- compatibility
- Internet Explorer 10牍陌、Firefox擎浴、Opera 支持 transform 屬性
- Internet Explorer 9 支持替代的 -ms-transform 屬性（僅適用于 2D 轉(zhuǎn)換）
- Safari 和 Chrome 支持替代的 -webkit-transform 屬性（3D 和 2D 轉(zhuǎn)換）
- Opera 只支持 2D 轉(zhuǎn)換
- Internet Explorer 10 和 Firefox 支持 3D 轉(zhuǎn)換
- Chrome 和 Safari 需要前綴 -webkit-
- Opera 仍然不支持 3D 轉(zhuǎn)換（它只支持 2D 轉(zhuǎn)換）
- notice
- transform-origin可以定義改變被轉(zhuǎn)換元素的位置
- grammar：transform-origin:x-axis,y-axis,z-zxis
- 默認(rèn)值：transform-origin:50% 50% 0
- detail
- x-axis | y-axis：定義視圖被置于X軸的何處∧派模可能的值：left | center | right | length | %
- z-axis：定義視圖被置于Z軸的何處退客。可能的值：length
- compatibility
- Internet Explorer 10链嘀、Firefox萌狂、Opera 支持 transform-origin 屬性
- Internet Explorer 9 支持替代的 -ms-transform-origin 屬性（僅適用于 2D 轉(zhuǎn)換）
- Safari 和 Chrome 支持替代的 -webkit-transform-origin 屬性（3D 和 2D 轉(zhuǎn)換）
- Opera 只支持 2D 轉(zhuǎn)換
- transform-style規(guī)定如何在3D空間中呈現(xiàn)被嵌套的元素
- grammar:transform-style:flat | preserve-3d
- tranform-style默認(rèn)值：transform-style:flat
- compatibility
- Firefox 支持 transform-style 屬性
- Chrome、Safari 和 Opera 支持替代的 -webkit-transform-style 屬性
- perspective定義3D元素距視圖的距離怀泊，以像素計(jì)茫藏。
- grammar:perspective number | none
- perspective默認(rèn)值：perspective:none
- detail
- 當(dāng)為元素定義 perspective 屬性時(shí)，其子元素會(huì)獲得透視效果霹琼，而不是元素本身
- perspective 屬性只影響 3D 轉(zhuǎn)換元素
- 通常和perspective-origin屬性配合改變3D元素的底部位置
- compatibility
- 目前瀏覽器都不支持 perspective 屬性
- Chrome 和 Safari 支持替代的 -webkit-perspective 屬性
- perspective-origin定義 3D 元素所基于的 X 軸和 Y 軸务傲。該屬性允許您改變 3D 元素的底部位置
- grammar:perspective-origin:x-axis,y-axis
- perspective-origin默認(rèn)值：perspective-origin:50% 50%
- detail
- 當(dāng)為元素定義 perspective-origin 屬性時(shí)，其子元素會(huì)獲得透視效果枣申，而不是元素本身
- 該屬性必須與 perspective 屬性一同使用售葡，而且只影響 3D 轉(zhuǎn)換元素
- compatibility
- 目前瀏覽器都不支持 perspective-origin 屬性
- Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 屬性
- backface-visibility定義當(dāng)元素不面向屏幕時(shí)是否可見(jiàn)
- grammar:backface-visibility: visible | hidden
- backface-visibility默認(rèn)值：backface-visibility:visible
- detail
- 如果在旋轉(zhuǎn)元素不希望看到其背面時(shí)，該屬性很有用
- compatility
- 只有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 屬性
- Opera 15+忠藤、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 屬性
- transform-origin可以定義改變被轉(zhuǎn)換元素的位置
