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