一個(gè)栗子上手CSS3動(dòng)畫
最近雜七雜八的事情很多，很多知識(shí)都沒來(lái)得及總結(jié)，是時(shí)候總結(jié)總結(jié)，開啟新的篇章～
本篇文章不一一列舉CSS3動(dòng)畫的屬性，若需要了解API，可前往 MDN 。
在開始栗子前，我們先補(bǔ)補(bǔ)基礎(chǔ)知識(shí)。
css3動(dòng)畫分類：
- 補(bǔ)間動(dòng)畫 – 具有連貫性的動(dòng)畫
- 逐幀動(dòng)畫 – 使用steps過(guò)渡方式實(shí)現(xiàn)跳躍
animation常用屬性及場(chǎng)景：
- animation: name duration timing-function delay iteration-count direction;
1. timing-function屬性：
- ease 規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過(guò)渡效果。
- ease-in 規(guī)定以慢速開始的過(guò)渡效果。
- ease-out 規(guī)定以慢速結(jié)束的過(guò)渡效果。
- ease-in-out 規(guī)定以慢速開始和結(jié)束的過(guò)渡效果。
- linear 動(dòng)畫從頭到尾的速度是相同的。
- cubic-bezier(n,n,n,n) 在cubic-bezier函數(shù)中自己的值，n取值為0～1
- steps()
2. delay屬性：
用于將動(dòng)畫與其他動(dòng)畫的執(zhí)行時(shí)機(jī)錯(cuò)開，將動(dòng)畫落到不同的時(shí)間點(diǎn)。這個(gè)屬性很好用～
動(dòng)畫原則：
- 運(yùn)動(dòng)一般有個(gè)慣性，所以要先快后有一個(gè)慢一點(diǎn)的反彈。
- 背景若使用多個(gè)星星閃爍，錯(cuò)位閃爍
配合JS使用
- slide.addEventListener("webkitAnimationEnd", function() {
- console.log('eeee') //動(dòng)畫結(jié)束再調(diào)用
- });
有些情況我們需要確保動(dòng)畫結(jié)束后再進(jìn)行另外一些交互，可使用該事件監(jiān)聽。
實(shí)戰(zhàn)演習(xí)：
假如我們需要實(shí)現(xiàn)一個(gè)這樣簡(jiǎn)單的動(dòng)畫：
仔細(xì)觀察上面的動(dòng)畫，我們發(fā)現(xiàn)，它可以由以下3部分組成：
1. 入場(chǎng)動(dòng)畫——從右往左移動(dòng)
2. 左右循環(huán)移動(dòng)
3. 逐幀動(dòng)畫
實(shí)現(xiàn)方法：
使用3個(gè)dom元素，最外層dom實(shí)現(xiàn)入場(chǎng)動(dòng)畫，第二層dom實(shí)現(xiàn)左右移動(dòng)，第三層dom實(shí)現(xiàn)逐幀動(dòng)畫。
優(yōu)點(diǎn)：調(diào)試方便，節(jié)省時(shí)間。
缺點(diǎn)：dom多。
1. dom結(jié)構(gòu)
- <div class="anima_entrance">
- <div class="anima_move">
- <div class="anima_sprite"></div>
- </div>
- </div>
2. 分析動(dòng)畫形成的時(shí)間軸：
入場(chǎng)動(dòng)畫持續(xù)0.6s，只播放一次，左右移動(dòng)以及逐幀動(dòng)畫持續(xù)2s，循環(huán)播放，代碼如下：
- .anima_entrance {
- animation: anima_entrance .6s ease-in-out both;
- }
- .anima_move {
- animation: anima_move 2s linear .6s infinite both;
- }
- .anima_sprite {
- animation: anima_sprite 2s step-end .6s infinite both;
- }
3. 使用steps()實(shí)現(xiàn)逐幀動(dòng)畫：
使用下面這張雪碧圖，通過(guò)改變background-position實(shí)現(xiàn)動(dòng)畫切換。
蹬蹬蹬，效果如下面所示，是不是很失望😞
原因：由于animation默認(rèn)以ease方式過(guò)渡，它會(huì)在每個(gè)關(guān)鍵幀之間插入補(bǔ)間動(dòng)畫，所以動(dòng)畫效果是連貫性的。此時(shí)可以使用steps()取消補(bǔ)間動(dòng)畫。
貼一個(gè)圖：
steps(1,start): 動(dòng)畫一開始就跳到 100% 直到這一幀(不是整個(gè)周期)結(jié)束 == step-start
steps(1,end): 保持 0% 的樣式直到這一幀(不是整個(gè)周期)結(jié)束 == step-end
接著，我們將timing-function改成 step-end，效果如下：
- animation: sprite 2s step-end .6s infinite both;
出現(xiàn)想要的效果了哈～不錯(cuò)。
完整的css代碼如下：
- .anima_entrance {
- position: absolute;
- z-index: 3;
- top: 5.1rem;
- left: 4.05rem;
- width: 12.9rem;
- height: 19.1rem;
- -webkit-animation: anima_entrance .6s ease-in-out both;
- animation: anima_entrance .6s ease-in-out both;
- }
- .anima_move {
- width: 218px;
- height: 382px;
- position: absolute;
- z-index: 1;
- top: 0;
- left: 42px;
- -webkit-animation: anima_move 2s linear .6s infinite both;
- animation: anima_move 2s linear .6s infinite both;
- }
- .anima_sprite {
- width: 218px;
- height: 382px;
- background: url(demo.png) no-repeat 0 0;
- background-size: 25.8rem 19.1rem;
- -webkit-animation: anima_sprite 2s step-end .6s infinite both;
- animation: anima_sprite 2s step-end .6s infinite both;
- }
- @keyframes anima_entrance {
- 0% {
- -webkit-transform: translate3d(18.75rem, 0, 0);
- transform: translate3d(18.75rem, 0, 0);
- }
- 100% {
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- }
- }
- @keyframes anima_move {
- 0%, 16%, 42%, 74%, 100% {
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- }
- 29% {
- -webkit-transform: translate3d(-1rem, 0, 0);
- transform: translate3d(-1rem, 0, 0);
- }
- 87% {
- -webkit-transform: translate3d(1rem, 0, 0);
- transform: translate3d(1rem, 0, 0);
- }
- }
- @keyframes anima_sprite {
- 0%, 16%, 42%, 58%, 74%, 100% {
- background-position: -12.9rem 0;
- }
- 8%, 50%, 66% {
- background-position: 0 0;
- }
- }
