雖說(shuō)立志成為一個(gè)頂呱呱的全棧工程師游沿，但是在前端方面的涉獵其實(shí)是很少的渺贤，要說(shuō)對(duì)js的學(xué)習(xí)還是因?yàn)橐胣odejs的緣故搅裙，總有些本末倒置的感覺(jué)摘刑。
最近專(zhuān)業(yè)內(nèi)部的大實(shí)習(xí)是要做一個(gè)志愿者銀行系統(tǒng)蘸秘，我們的三人組采用縱向分工的方法官卡，這樣有利于大家在每個(gè)環(huán)節(jié)都能參與到蝗茁。不過(guò)在快收尾的時(shí)候，界面嚴(yán)重不統(tǒng)一寻咒，作為處女座怎么能熟視無(wú)睹呢评甜，于是立即上馬前端進(jìn)行大幅修改。
俗話說(shuō)仔涩，磨刀不誤砍柴工忍坷，對(duì)css深入學(xué)習(xí)是很有必要的。學(xué)習(xí)的過(guò)程中有很多啟發(fā)熔脂，于是就有了這篇文章佩研。
--------------------------------以上都是廢話-----------------------------------------
| 值 | 描述 |
|---|---|
| transition-property | 設(shè)置過(guò)渡效果的 CSS 屬性的名稱(chēng) |
| transition-duration | 設(shè)置完成過(guò)渡效果需要多少秒或毫秒 |
| transition-timing-function | 設(shè)置速度效果的速度曲線 |
| transition-delay | 設(shè)置過(guò)渡效果何時(shí)開(kāi)始 |
css動(dòng)畫(huà)的核心在于使用好transition和animation。
我們先來(lái)看看transition的各項(xiàng)屬性
| 值 | 描述 |
|---|---|
| transition-property | 設(shè)置過(guò)渡效果的 CSS 屬性的名稱(chēng) |
| transition-duration | 設(shè)置完成過(guò)渡效果需要多少秒或毫秒 |
| transition-timing-function | 設(shè)置速度效果的速度曲線 |
| transition-delay | 設(shè)置過(guò)渡效果何時(shí)開(kāi)始 |
transition的特點(diǎn)是需要一個(gè)觸發(fā)霞揉，比如鼠標(biāo)移入（:hover）等事件旬薯；
我們先舉個(gè)栗子：
利用transition實(shí)現(xiàn)鼠標(biāo)指針移到愛(ài)心上心就跳一下
先自己制作一個(gè)愛(ài)心的圖片，格式不限适秩，也可以使svg型的绊序，比如這樣
這里插一句
在CSS 3引入Transition之前，CSS是沒(méi)有時(shí)間軸的秽荞。也就是說(shuō)骤公，所有的狀態(tài)變化，都是即時(shí)完成扬跋。--- 參見(jiàn)阮一峰老師的博客
所以transition的作用在于阶捆，指定狀態(tài)變化所需要的時(shí)間，這樣顯著增加了美感钦听。
不過(guò)我們可以不用把每個(gè)屬性都聲明一遍洒试，transition也提供簡(jiǎn)寫(xiě)的方式
下面的代碼在鼠標(biāo)移到后會(huì)花費(fèi)1s的時(shí)間放大愛(ài)心
.heart{
height:500px;
width:500px;
transition:1s height, 1s width;
}
.heart:hover{
height: 800px;
width: 800px;
}
其實(shí)等同于
.heart{
transition-property: height，width
transition-duration: 1s;
}
測(cè)試結(jié)果可以點(diǎn)這里
于是我們引出animation朴上，首先看一看animation和transition的不同
1垒棋、都可以定義開(kāi)始和結(jié)束狀態(tài)，但是animation還可以指定更為精確的中間狀態(tài)
2痪宰、animation可以像transition一樣被觸發(fā)叼架，也可自動(dòng)運(yùn)行
3、animation可以無(wú)限循環(huán)的運(yùn)行酵镜，也可指定運(yùn)行次數(shù)
下面我們一起實(shí)現(xiàn)真正的跳動(dòng)的愛(ài)心
第一步利用keyframes關(guān)鍵字定義動(dòng)畫(huà)名稱(chēng)
keyframes beat_animation {
0% { transform: none; }
100% { transform: scale(1.3); }
}
上面的代碼就是定義了動(dòng)畫(huà)的名字叫beat_animation, 動(dòng)畫(huà)是指變大為原來(lái)的1.3倍碉碉。利用transform可以做出很多漂亮的效果，這個(gè)大家自行谷歌就不多做介紹了淮韭。
animation需要指定動(dòng)畫(huà)一個(gè)周期持續(xù)的時(shí)間垢粮，以及動(dòng)畫(huà)效果的名稱(chēng)。
.heart {
animation: beat_animation 300ms infinite;
}
加入infinite關(guān)鍵字就可以讓動(dòng)畫(huà)無(wú)限播放靠粪。因?yàn)槟J(rèn)情況下蜡吧，動(dòng)畫(huà)只播放一次毫蚓。
當(dāng)然上面的代碼也是簡(jiǎn)寫(xiě)
我們看看依次聲明完整的屬性所需要的代碼是什么樣
.heart {
animation-name: 'beat_animation';
animation-duration: 300ms;
animation-timing-function: linear;
}
這里要提醒大家前綴的重要性，目前昔善，IE 10和Firefox支持沒(méi)有前綴的animation元潘，而chrome不支持，所以必須使用webkit前綴
所以上面的代碼要修改成
.heart {
-webkit-animation-name: 'beat_animation';
-webkit-animation-duration: 300ms;
-webkit-animation-iteration-count: infinite;
}
最終效果請(qǐng)點(diǎn)這里
css就寫(xiě)這么多君仆，很多內(nèi)容也是學(xué)自阮一峰老師的博客翩概，原創(chuàng)并不是很多，下次會(huì)寫(xiě)關(guān)于nodejs爬蟲(chóng)的文章返咱，自己的知識(shí)點(diǎn)就會(huì)比較多钥庇。
