gradient
<gradient> 是一種<image>CSS數(shù)據(jù)類(lèi)型的子類(lèi)型，用于表現(xiàn)兩種或多種顏色的過(guò)渡轉(zhuǎn)變。
<gradient> 沒(méi)有內(nèi)在尺寸焊唬；即恋昼，不具備固有或首選的尺寸，也不具備首選的比率赶促。其實(shí)際的大小取決于其填充元素的大小液肌。
線性漸變linear-gradient()
在線性漸變過(guò)程中，顏色沿著一條直線過(guò)渡：從左側(cè)到右側(cè)鸥滨、從右側(cè)到左側(cè)嗦哆、從頂部到底部、從底部到頂部或著沿任何任意軸
linear-gradient([[<angle> | to <side-or-corner> ],]?<color-stop>[,<color-stop>]+)
第一個(gè)參數(shù)指定了漸變的方向婿滓，同時(shí)決定了漸變顏色的停止位置老速。這個(gè)參數(shù)值可以省略，當(dāng)省略不寫(xiě)的時(shí)候其取值為to bottom凸主。
在決定漸變的方向主要有兩種方法：
- angle：通過(guò)角度來(lái)確定漸變的方向橘券。0度表示漸變方向從下向上，90度表示漸變方向從左向右秕铛。如果取值為下值约郁，其角度按順時(shí)針?lè)较蛐D(zhuǎn)
- 關(guān)鍵詞：通過(guò)關(guān)鍵詞來(lái)確定漸變的方向缩挑。比如to top但两、to right、to bottom和to left
這是未指定漸變軸(線)時(shí)的樣式供置，默認(rèn)取值
to bottom（對(duì)應(yīng)180deg）谨湘，這里表現(xiàn)和指定了180deg時(shí)是一樣的。
這是指定了0deg的樣式芥丧，和to top表現(xiàn)相同紧阔。
仔細(xì)思考to bottom | 180deg和to top | 0deg之間的區(qū)別，就差不多能想通了
想象一支箭续担，這支箭就是漸變軸擅耽，to top right指的就是箭頭指向右上位置，然后再看顏色物遇，最后一個(gè)顏色永遠(yuǎn)在箭頭上乖仇，這里最后一個(gè)顏色是blue，所以容器的右上是藍(lán)色询兴。
當(dāng)然乃沙，實(shí)際實(shí)現(xiàn)中，漸變軸不會(huì)剛好指向容器右上角诗舰，而是右上角的連線相交并垂直于漸變軸警儒。
推薦：
你真的理解CSS的linear-gradient？
上文作者寫(xiě)的漸變可視化工具
Ultimate CSS Gradient Generator
關(guān)于漸變配合transition的效果：豪華的按鈕
Transitions
CSS Transitions 是一個(gè) CSS 模塊眶根，定義了如何創(chuàng)建一個(gè)平滑地變換 CSS 屬性值的方法蜀铲。它不僅允許創(chuàng)建變換方法边琉，同時(shí)也允許通過(guò)定時(shí)函數(shù)來(lái)控制變換方法。
CSS transitions 提供了一種在更改CSS屬性時(shí)控制動(dòng)畫(huà)速度的方法记劝。 其可以讓屬性變化成為一個(gè)持續(xù)一段時(shí)間的過(guò)程艺骂，而不是立即生效的。比如隆夯，將一個(gè)元素的顏色從白色改為黑色钳恕，通常這個(gè)改變是立即生效的，使用 CSS transitions 后該元素的顏色將逐漸從白色變?yōu)楹谏阒裕凑找欢ǖ那€速率變化忧额。這個(gè)過(guò)程可以自定義。
通常將兩個(gè)狀態(tài)之間的過(guò)渡稱(chēng)為隱式過(guò)渡（implicit transitions）愧口，因?yàn)殚_(kāi)始與結(jié)束之間的狀態(tài)由瀏覽器決定睦番。
支持animation和transition的CSS屬性：CSS animated properties
注意：
在插入元素（如.appendChild()）或改變屬性 display: none 后立即使用過(guò)渡, 元素將視為沒(méi)有開(kāi)始狀態(tài)，始終處于結(jié)束狀態(tài)耍属。簡(jiǎn)單的解決辦法托嚣，改變屬性前用 window.setTimeout() 延遲幾毫秒。
這是什么意思呢厚骗？
<body>
<style>
#btn {
display: none;
width: 50px;
height: 20px;
background-color: blue;
}
</style>
<button id="btn">target</button>
<button id="btn2">Click</button>
<!-- 在插入元素（如 .appendChild()）或改變屬性 display: none 后立即使用過(guò)渡, 元素將視為沒(méi)有開(kāi)始狀態(tài)示启，始終處于結(jié)束狀態(tài)。簡(jiǎn)單的解決辦法领舰，改變屬性前用 window.setTimeout() 延遲幾毫秒夫嗓。 -->
<script>
var btn = document.getElementById("btn");
var btn2 = document.getElementById("btn2")
btn2.addEventListener("click",function() {
btn.style.display = "block";
btn.style.transition = "all 1s";
btn.style.width = "200px";
btn.style.height = "200px";
btn.style.backgrounColor = "green";
})
</script>
</body>
點(diǎn)擊Click按鈕后，將會(huì)給target按鈕設(shè)置display:block冲秽，及其對(duì)應(yīng)CSS樣式舍咖，并且將會(huì)以transition過(guò)渡動(dòng)畫(huà)的方式來(lái)改變樣式。
但是實(shí)際上锉桑，在點(diǎn)擊Click后排霉，不會(huì)有過(guò)渡動(dòng)畫(huà)出現(xiàn)，而是直接呈現(xiàn)應(yīng)用樣式后的頁(yè)面民轴。
這就是注意里說(shuō)的，元素將視為沒(méi)有開(kāi)始狀態(tài)杉武，始終處于結(jié)束狀態(tài)辙诞。
加個(gè)settimetou。
btn2.addEventListener("click",function() {
btn.style.display = "block";
window.setTimeout(function() {
btn.style.transition = "all 1s";
btn.style.backgroundColor = "green";
btn.style.width = "200px";
btn.style.height = "200px";
},5);
})
屬性
transition-property
指定應(yīng)用過(guò)渡屬性的名稱(chēng)
- none：沒(méi)有過(guò)渡動(dòng)畫(huà)
- all：即transition支持的CSS屬性都會(huì)有過(guò)渡動(dòng)畫(huà)
- IDENT：屬性名稱(chēng)轻抱。由小寫(xiě)字母 a 到 z飞涂，數(shù)字 0 到 9，下劃線（_）和破折號(hào)（-）。第一個(gè)非破折號(hào)字符不能是數(shù)字较店。同時(shí)士八，不能以?xún)蓚€(gè)破折號(hào)開(kāi)頭。
transition-duration
以秒或毫秒為單位指定過(guò)渡動(dòng)畫(huà)所需的時(shí)間梁呈。默認(rèn)值為 0s 婚度，表示不出現(xiàn)過(guò)渡動(dòng)畫(huà)。
可以指定多個(gè)時(shí)長(zhǎng)官卡，每個(gè)時(shí)長(zhǎng)會(huì)被應(yīng)用到由 transition-property 指定的對(duì)應(yīng)屬性上蝗茁。如果指定的時(shí)長(zhǎng)個(gè)數(shù)小于屬性個(gè)數(shù)，那么時(shí)長(zhǎng)列表會(huì)重復(fù)寻咒。如果時(shí)長(zhǎng)列表更長(zhǎng)哮翘，那么該列表會(huì)被裁減。兩種情況下毛秘，屬性列表都保持不變饭寺。
本身什么意思都知道了，提一下多個(gè)屬性的使用叫挟。
上代碼：
<style>
#btn {
width: 50px;
height: 20px;
transition-property: width ,height ,background-color;
transition-duration: 2s, 1s, 4s;
}
#btn:hover {
width: 250px;
height: 250px;
background-color: yellowgreen;
}
</style>
<button id="btn">target</button>
width,height,background-color都會(huì)按照所設(shè)置的duration來(lái)展現(xiàn)過(guò)渡動(dòng)畫(huà)艰匙。
transition-property: height,background-color,width;
transition-duration: 4s, 1s;
時(shí)長(zhǎng)個(gè)數(shù)小于屬性個(gè)數(shù)，那么時(shí)長(zhǎng)列表會(huì)重復(fù)抹恳，很明顯了员凝，width將會(huì)按照4s的duration來(lái)執(zhí)行過(guò)渡，因?yàn)橹貜?fù)了适秩，以此類(lèi)推绊序。
這個(gè)就是貝塞爾緩動(dòng)函數(shù)了硕舆，這里就不一一試了秽荞。
transition-timing-function: ease
transition-timing-function: ease-in
transition-timing-function: ease-out
transition-timing-function: ease-in-out
transition-timing-function: linear
除了預(yù)先定義好的幾個(gè)值還可以自己定義，關(guān)于緩動(dòng)函數(shù)請(qǐng)看：
<timing-function>
強(qiáng)薦：緩動(dòng)函數(shù)速查表
transition-delay
CSS的transition-delay屬性規(guī)定了在過(guò)渡效果開(kāi)始作用之前需要等待的時(shí)間抚官。
值以秒（s）或毫秒（ms）為單位扬跋，表明動(dòng)畫(huà)過(guò)渡效果將在何時(shí)開(kāi)始。取值為正時(shí)會(huì)延遲一段時(shí)間來(lái)響應(yīng)過(guò)渡效果凌节；取值為負(fù)時(shí)會(huì)導(dǎo)致過(guò)渡立即開(kāi)始钦听。
你可以指定多個(gè)延遲時(shí)間，每個(gè)延遲將會(huì)分別作用于你所指定的相符合的css屬性（transition-property）
這里和duration是類(lèi)似的倍奢。
transition-property: height,background-color,width;
transition-duration: 6s, 3s, 1s;
transition-delay: 1s, 3s, 6s;
延時(shí)最長(zhǎng)的朴上，執(zhí)行過(guò)程最快，執(zhí)行過(guò)程最快的卒煞，延時(shí)越長(zhǎng)痪宰。
當(dāng)過(guò)渡完成時(shí)觸發(fā)一個(gè)事件，在符合標(biāo)準(zhǔn)的瀏覽器下，這個(gè)事件是 transitionend, 在 WebKit下是 webkitTransitionEnd. 詳情查看頁(yè)面底部的兼容性表格衣撬。 transitionend 事件提供兩個(gè)屬性:
-
propertyName
字符串乖订，指示已完成過(guò)渡的屬性。 -
elapsedTime
浮點(diǎn)數(shù)具练，指示當(dāng)觸發(fā)這個(gè)事件時(shí)過(guò)渡已運(yùn)行的時(shí)間（秒）乍构。這個(gè)值不受transition-delay影響。
如果取消了過(guò)渡則不會(huì)觸發(fā) transitionend 事件扛点，因?yàn)樵谶^(guò)渡完成前動(dòng)畫(huà)的屬性值改變了哥遮。
<style>
#btn {
width: 50px;
height: 20px;
transition: all 1s;
}
#btn:hover {
width: 250px;
}
</style>
<button id="btn">target</button>
<script>
btn.addEventListener("transitionend",function() {
console.log(event);
});
</script>
一些樣式
按鈕漸變背景
Animations
CSS Animations 是CSS的一個(gè)模塊，它定義了如何用關(guān)鍵幀來(lái)隨時(shí)間推移對(duì)CSS屬性的值進(jìn)行動(dòng)畫(huà)處理陵究。關(guān)鍵幀動(dòng)畫(huà)的行為可以通過(guò)指定它們的持續(xù)時(shí)間昔善，它們的重復(fù)次數(shù)以及它們?nèi)绾沃貜?fù)來(lái)控制。
相較于傳統(tǒng)的腳本實(shí)現(xiàn)動(dòng)畫(huà)技術(shù)畔乙，使用CSS動(dòng)畫(huà)有三個(gè)主要優(yōu)點(diǎn)：
- 能夠非常容易地創(chuàng)建簡(jiǎn)單動(dòng)畫(huà)君仆，你甚至不需要了解JavaScript就能創(chuàng)建動(dòng)畫(huà)。
- 動(dòng)畫(huà)運(yùn)行效果良好牲距，甚至在低性能的系統(tǒng)上返咱。渲染引擎會(huì)使用跳幀或者其他技術(shù)以保證動(dòng)畫(huà)表現(xiàn)盡可能的流暢。而使用JavaScript實(shí)現(xiàn)的動(dòng)畫(huà)通常表現(xiàn)不佳（除非經(jīng)過(guò)很好的設(shè)計(jì)）牍鞠。
- 讓瀏覽器控制動(dòng)畫(huà)序列咖摹，允許瀏覽器優(yōu)化性能和效果，如降低位于隱藏選項(xiàng)卡中的動(dòng)畫(huà)更新頻率难述。
簡(jiǎn)寫(xiě)屬性形式：
animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode
@keyframes
@keyframes 規(guī)則通過(guò)在動(dòng)畫(huà)序列中定義關(guān)鍵幀（或waypoints）的樣式來(lái)控制CSS動(dòng)畫(huà)序列中的中間步驟萤晴。
要使用關(guān)鍵幀, 先創(chuàng)建一個(gè)帶名稱(chēng)的@keyframes規(guī)則，以便后續(xù)使用 animation-name 這個(gè)屬性來(lái)將一個(gè)動(dòng)畫(huà)同其關(guān)鍵幀聲明匹配胁后。每個(gè)@keyframes 規(guī)則包含多個(gè)關(guān)鍵幀店读，也就是一段樣式塊語(yǔ)句，每個(gè)關(guān)鍵幀有一個(gè)百分比值作為名稱(chēng)攀芯，代表在動(dòng)畫(huà)進(jìn)行中屯断，在哪個(gè)階段觸發(fā)這個(gè)幀所包含的樣式。
如果在關(guān)鍵幀的樣式中使用了不能用作動(dòng)畫(huà)的屬性侣诺，那么這些屬性會(huì)被忽略掉殖演，支持動(dòng)畫(huà)的屬性仍然是有效的，不受波及年鸳。
#animation {
width: 100px;
height: 100px;
background-color: red;
margin-left: 0px;
animation: abc 1s infinite;
}
@keyframes abc {
0% {
margin-left: 200px;
}
100% {
margin-left: 300px;
}
}
在這則動(dòng)畫(huà)中趴久，初始狀態(tài)margin-left:200px，那么動(dòng)畫(huà)的起始點(diǎn)就是200px處開(kāi)始搔确，動(dòng)畫(huà)結(jié)束后位于300px處彼棍，然后回到200px（0%）其實(shí)狀態(tài)已添。
取消動(dòng)畫(huà)后，div就會(huì)回到原點(diǎn)滥酥。
如果多個(gè)關(guān)鍵幀使用同一個(gè)名稱(chēng)更舞，以最后一次定義的為準(zhǔn)。 @keyframes 不存在層疊樣式(cascade)的情況坎吻，所以動(dòng)畫(huà)在一個(gè)時(shí)刻（階段）只會(huì)使用一個(gè)的關(guān)鍵幀的數(shù)據(jù)缆蝉。
如果一個(gè)@keyframes 里的關(guān)鍵幀的百分比存在重復(fù)的情況，以最后一次定義的關(guān)鍵幀為準(zhǔn)瘦真。 因?yàn)锧keyframes 的規(guī)則不存在層疊樣式(cascade)的情況刊头，即使多個(gè)關(guān)鍵幀設(shè)置相同的百分值也不會(huì)全部執(zhí)行。
-
如果某一個(gè)關(guān)鍵幀出現(xiàn)了重復(fù)的定義诸尽，且重復(fù)的關(guān)鍵幀中的css屬性值不同原杂，以最后一次定義的屬性為準(zhǔn)。
如：@keyframes identifier { 0% { top: 0; left: 0px} 50% { top: 30px; left: 20px; } 50% { top: 10px; } 100% { top: 0; left: 30px;} }上面這個(gè)例子中您机，50% 關(guān)鍵幀中設(shè)置的屬性top: 10px是有效的穿肄，但是其他的屬性會(huì)被忽略
關(guān)鍵幀中出現(xiàn)的
!important關(guān)鍵詞將會(huì)被忽略
語(yǔ)法取值：
-
from：等效于0% -
to：等效于100%
animation-name
animation-name屬性指定應(yīng)用的一系列動(dòng)畫(huà)，每個(gè)名稱(chēng)代表一個(gè)由@keyframes定義的動(dòng)畫(huà)序列际看。
/* Multiple animations */
#animation {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: A 2s,B 2s;
}
@keyframes A {
0% { top: 0; left: 0}
100% {top: 100px; left: 100px }
}
@keyframes B {
0% {}
100% { background-color: blue }
}
沒(méi)啥好說(shuō)的咸产。
animation-duration | animation-timing-function | animation-delay
animation-duration屬性指定一個(gè)動(dòng)畫(huà)周期的時(shí)長(zhǎng)。默認(rèn)值為0s仲闽，表示無(wú)動(dòng)畫(huà)脑溢。（單位為秒(s)或者毫秒(ms)，無(wú)單位值無(wú)效赖欣。）-
animation-timing-function屬性定義CSS動(dòng)畫(huà)在每一動(dòng)畫(huà)周期中執(zhí)行的節(jié)奏屑彻。可能值為一或多個(gè)<timing-function>顶吮。- 對(duì)于關(guān)鍵幀動(dòng)畫(huà)來(lái)說(shuō)社牲，timing function作用于一個(gè)關(guān)鍵幀周期而非整個(gè)動(dòng)畫(huà)周期，即從關(guān)鍵幀開(kāi)始開(kāi)始云矫，到關(guān)鍵幀結(jié)束結(jié)束膳沽。
- 定義于一個(gè)關(guān)鍵幀區(qū)塊的緩動(dòng)函數(shù)(animation timing function)應(yīng)用到改關(guān)鍵幀；另外让禀，若該關(guān)鍵幀沒(méi)有定義緩動(dòng)函數(shù)，則使用定義于整個(gè)動(dòng)畫(huà)的緩動(dòng)函數(shù)陨界。
-
animation-delay定義動(dòng)畫(huà)于何時(shí)開(kāi)始巡揍，即從動(dòng)畫(huà)應(yīng)用在元素上到動(dòng)畫(huà)開(kāi)始的這段時(shí)間的長(zhǎng)度。-
0s是該屬性的默認(rèn)值菌瘪，代表動(dòng)畫(huà)在應(yīng)用到元素上后立即開(kāi)始執(zhí)行腮敌。否則阱当，該屬性的值代表動(dòng)畫(huà)樣式應(yīng)用到元素上后到開(kāi)始執(zhí)行前的時(shí)間長(zhǎng)度； - 定義一個(gè)負(fù)值會(huì)讓動(dòng)畫(huà)立即開(kāi)始糜工。但是動(dòng)畫(huà)會(huì)從它的動(dòng)畫(huà)序列中某位置開(kāi)始弊添。例如，如果設(shè)定值為-1s捌木，動(dòng)畫(huà)會(huì)從它的動(dòng)畫(huà)序列的第1秒位置處立即開(kāi)始油坝。（-1s就是假設(shè)動(dòng)畫(huà)走了1s后的位置處開(kāi)始動(dòng)畫(huà)）
- 如果為動(dòng)畫(huà)延遲指定了一個(gè)負(fù)值，但起始值是隱藏的刨裆，則從動(dòng)畫(huà)應(yīng)用于元素的那一刻起就獲取起始值澈圈。
-
animation-iteration-count
animation-iteration-count CSS 屬性 定義動(dòng)畫(huà)在結(jié)束前運(yùn)行的次數(shù) 可以是1次 無(wú)限循環(huán).
默認(rèn)屬性 animation 默認(rèn)播放動(dòng)畫(huà)循環(huán)一次.
-
infinite：無(wú)限循環(huán)播放動(dòng)畫(huà). -
<number>：動(dòng)畫(huà)播放的次數(shù) 不可為負(fù)值. 可以用小數(shù)定義循環(huán)(0.5 將播放動(dòng)畫(huà)到關(guān)鍵幀的一半（from 0 ~ 50%).
animation-direction
animation-direction CSS 屬性指示動(dòng)畫(huà)是否反向播放，它通常在簡(jiǎn)寫(xiě)屬性animation中設(shè)定
-
normal：每個(gè)循環(huán)內(nèi)動(dòng)畫(huà)向前循環(huán)帆啃，換言之瞬女，每個(gè)動(dòng)畫(huà)循環(huán)結(jié)束，動(dòng)畫(huà)重置到起點(diǎn)重新開(kāi)始努潘，這是默認(rèn)屬性诽偷。A>B | A>B | A>B | A>B -
alternate： 動(dòng)畫(huà)交替反向運(yùn)行，反向運(yùn)行時(shí)疯坤，動(dòng)畫(huà)按步后退渤刃，同時(shí)，帶時(shí)間功能的函數(shù)也反向贴膘，比如卖子，ease-in 在反向時(shí)成為ease-out。計(jì)數(shù)取決于開(kāi)始時(shí)是奇數(shù)迭代還是偶數(shù)迭代刑峡。A > B | B > A | A > B | B > A -
reverse：反向運(yùn)行動(dòng)畫(huà)洋闽，每周期結(jié)束動(dòng)畫(huà)由尾到頭運(yùn)行。B > A | B > A | B > A | B > A -
alternate-reverse：動(dòng)畫(huà)第一次運(yùn)行時(shí)是反向的突梦，然后下一次是正向诫舅，后面依次循環(huán)。決定奇數(shù)次或偶數(shù)次的計(jì)數(shù)從1開(kāi)始宫患。B > A | A > B | B > A | A > B
用來(lái)指定在動(dòng)畫(huà)執(zhí)行之前和之后如何給動(dòng)畫(huà)的目標(biāo)應(yīng)用樣式刊懈。
-
none：動(dòng)畫(huà)執(zhí)行前后不改變?nèi)魏螛邮?/li> -
forwards： 目標(biāo)保持動(dòng)畫(huà)最后一幀的樣式，最后一幀是哪個(gè)取決于animation-direction和animation-iteration-count
請(qǐng)看：
理解animation-fill-mode屬性
animation-fill-mode
你所不知道的animation-fill-mode細(xì)節(jié)
animation-fill-mode的一些思考
待更CSS-3D
