css3動畫-animation

animation 屬性是 8 個屬性的簡寫：

你是否被gif loading加載太慢或有鋸齒而感到困擾？

項目中，當頁面內(nèi)容或圖片比較多或在加載一些比較大的數(shù)據(jù)接口的時候，加載時間會比較長，此時可能出現(xiàn)頁面白屏的情況，用戶體驗較差。為了讓用戶會有一個等待的效果，會在加載成功前顯示一個 loading 來過渡，當頁面完全加載完后，讓 loading 消失即可。

loading 可以用 gif loading 顯示，但是，優(yōu)雅的前端工程師覺得這樣又多了一個請求和有時候也會加載太慢，于是，他奇思妙想，覺得可以用純 css loading 來達到效果。

<div class="box"><div class="loader"><div class="loading-1"><i></i></div></div><div class="loader"><div class="loading-2"><i></i><i></i><i></i><i></i><i></i></div></div><div class="loader"><div class="loading-3"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div></div> </div>

關(guān)鍵的css樣式

.loading-1{width:35px;height:35px;position:relative} @-webkit-keyframes loading-1{0%{transform:rotate(0)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)} } .loading-1 i{display:block;width:100%;height:100%;border-radius:50%;background:linear-gradient(transparent 0,transparent 70%,#333 30%,#333 100%);-webkit-animation:loading-1 .6s linear 0s infinite}@-webkit-keyframes loading-2{0%{transform:scale(1)}50%{transform:scale(.4)}100%{transform:scale(1)} } .loading-2 i{display:inline-block;width:4px;height:35px;margin:0 2px;background:#333;border-radius:2px;-webkit-animation:loading-2 1s ease-in .1s infinite} .loading-2 i:nth-child(1){-webkit-animation:loading-2 1s ease-in .1s infinite} .loading-2 i:nth-child(2){-webkit-animation:loading-2 1s ease-in .2s infinite} .loading-2 i:nth-child(3){-webkit-animation:loading-2 1s ease-in .3s infinite} .loading-2 i:nth-child(4){-webkit-animation:loading-2 1s ease-in .4s infinite} .loading-2 i:nth-child(5){-webkit-animation:loading-2 1s ease-in .5s infinite}@-webkit-keyframes loading-3{50%{transform:scale(.4);opacity:.3}100%{transform:scale(1);opacity:1} } .loading-3{position:relative} .loading-3 i{display:block;width:15px;height:15px;border-radius:50%;position:absolute;background:#333} .loading-3 i:nth-child(1){top:25px;left:0;-webkit-animation:loading-3 1s ease 0s infinite} .loading-3 i:nth-child(2){top:17px;left:17px;-webkit-animation:loading-3 1s ease .12s infinite} .loading-3 i:nth-child(3){top:0;left:25px;-webkit-animation:loading-3 1s ease .24s infinite} .loading-3 i:nth-child(4){top:-17px;left:17px;-webkit-animation:loading-3 1s ease .36s infinite} .loading-3 i:nth-child(5){top:-25px;left:0;-webkit-animation:loading-3 1s ease .48s infinite} .loading-3 i:nth-child(6){top:-17px;left:-17px;-webkit-animation:loading-3 1s ease .6s infinite} .loading-3 i:nth-child(7){top:0;left:-25px;-webkit-animation:loading-3 1s ease .72s infinite} .loading-3 i:nth-child(8){top:17px;left:-17px;-webkit-animation:loading-3 1s ease .84s infinite}

上面例子，主要通過 css animation 設(shè)置不同時間段的 animation-delay 來延遲展示效果，再通過設(shè)置 animation-iteration-count 為 infinite 來進行無限的轉(zhuǎn)動，展示出 loading 的效果，給人有一種在等待的過程；代碼非常簡潔實用，我們可以根據(jù)項目需要，開發(fā)出適用于項目的 loading。

骨架屏：一個比loading更加優(yōu)雅的加載

據(jù)研究，用戶大概會在 200ms 內(nèi)獲取到界面的具體關(guān)注點，為了優(yōu)化首屏渲染時間這個指標，減少白屏時間，在數(shù)據(jù)獲取或頁面加載完成之前，給用戶首先展現(xiàn)骨架屏，骨架屏的樣式、布局和真實數(shù)據(jù)渲染的頁面保持一致，這樣用戶在骨架屏中獲取到關(guān)注點，并能夠預知頁面什么地方將要展示文字什么地方展示圖片，這樣也就能夠?qū)㈥P(guān)注焦點移到感興趣的位置。下面是完全通過 HTML 和 CSS 手寫的就是在項目中通過簡單的模擬骨架屏，來達到數(shù)據(jù)未請求到數(shù)據(jù)前的過渡。

<div class="skeleton-wrap"><div class="skeleton"><div class="left-right item"></div><div class="line-zero item"></div><div class="line-one item"></div><div class="line-two item"></div><div class="line-three item"></div></div> </div>

關(guān)鍵css代碼

.skeleton-wrap {box-sizing: border-box;height: 8rem;background-color: #fff;padding: 0;.skeleton {height: 6rem;box-sizing: border-box;position: relative;animation-duration: 1s;animation-fill-mode: forwards;animation-iteration-count: infinite;animation-name: placeHolderShimmer;animation-timing-function: linear;background: linear-gradient(to right, #eeeeee, #dddddd 10%, #eeeeee 30%);background-size: 400% 400%;.item {position: absolute;}.left-right {height: 6rem;width: 2rem;top: 0;left: 6rem;background-color: #fff;}.line-zero {height: 0.4rem;width: calc(100% - 8rem);background-color: #fff;left: 8rem;top: 0;}.line-one {height: 1rem;width: calc(100% - 8rem);background-color: #fff;left: 8rem;top: 2rem;}.line-two {height: 1rem;width: 6rem;background-color: #fff;top: 3rem;right: 0rem;}.line-three {width: calc(100% - 8rem);height: 2rem;background-color: #fff;bottom: 0;right: 0;}} } @keyframes placeHolderShimmer {0% {background-position: 100% 50%;}100% {background-position: 0 50%;} }

上面例子，通過拉伸背景圖片 background-position，動態(tài) animation 設(shè)置背景定位百分比，改變背景定位，從而計算得到圖片相對容器的不同偏移值，以此實現(xiàn)了動畫的效果。

background-size: 400% 400%;

這里給 background-position 屬性設(shè)置了兩個值，第一個值代表水平位置相對容器的偏移，第二個代表垂直位置相對容器的偏移。

使用百分比設(shè)置 background-position 值時，它會執(zhí)行一個計算實際定位值公式 (container width - image width) * (position x%) = (x offset value)，即容器和圖片的寬度差乘上設(shè)置的百分比定位值，得到的結(jié)果就是實際的偏移值，將background-size 的寬度設(shè)置為 400% 的其中一個目的就是，這樣就會和容器產(chǎn)生寬度差。

最后利用關(guān)鍵幀動畫 keyframes，設(shè)置 background-position在 x坐標 的值從 100% 到 0%。

@keyframes placeHolderShimmer {0% {background-position: 100% 50%;}100% {background-position: 0 50%;} }

假設(shè)容器的寬度是 100px，那么背景圖片的寬度就是 400px，利用上邊的公式，第一幀的動畫中，背景圖相對容器偏移的真實值是 (100px-400px)*100% = -300px 最后一幀實際偏移 (100px-400px)*0% = 0 動畫的過程實際就是一個 3倍 容器寬的線性背景圖片相對于容器的偏移從 -300px 到 0 的變化的過程。

純css實現(xiàn)紙牌翻轉(zhuǎn)抽獎，實用

平常活動專題中，產(chǎn)品經(jīng)理會給我們提各種各樣的需求，抽獎就是其中的一個主要功能，當然抽獎也分許多形式，紙牌翻轉(zhuǎn)就是其中一個，看一下實際需求中用純 css 實現(xiàn)的紙牌翻轉(zhuǎn)效果（邏輯就是點擊紙牌，請求后端接口，再根據(jù)返回的數(shù)據(jù)進行翻轉(zhuǎn)顯示）。

<div id="box" class="box viewport-flip"><a href="javascript:;" class="list flip in"><div class="img img-before"></div></a><a href="javascript:;" class="list flip out"><div class="img img-back"></div></a> </div>

關(guān)鍵css代碼

.in{animation-timing-function:ease-out;animation-duration:350ms} .out{animation-timing-function:ease-in;animation-duration:225ms} .viewport-flip{-webkit-perspective:1000;perspective:1000;position:absolute} .flip{backface-visibility:hidden;transform:translateX(0)} .flip.out{transform:rotateY(-90deg) scale(.9);animation-name:flipouttoleft;animation-duration:175ms} .flip.in{animation-name:flipintoright;animation-duration:225ms} @keyframes flipouttoleft {from {transform: rotateY(0);}to {transform: rotateY(-90deg) scale(.9);} } @keyframes flipintoright {from {transform: rotateY(90deg) scale(.9);}to {transform: rotateY(0);} }

紙牌翻轉(zhuǎn)，通過 animation-name 來選擇不同的 keyframes 規(guī)則：點擊翻轉(zhuǎn)的時候設(shè)置頂部的容器為 animation-name: flipouttoleft，底部的容器為 animation-name: flipintoright，來調(diào)用不同規(guī)則達到翻轉(zhuǎn)抽獎效果；再次點擊，則效果相反（可以相當于重新洗牌）；紙牌翻轉(zhuǎn)不僅可以用在抽獎，也可以用在一些內(nèi)容介紹方面、翻書效果等等，可以根據(jù)項目需要，開發(fā)出適用于項目的效果。

**翻書效果：**就是做一個樣式 .pape，再通過關(guān)鍵幀規(guī)則 keyframes，設(shè)置 rotateY 動畫，如下代碼所示：

@keyframes flip-to-left {from {transform: rotateY(0);}to {transform: rotateY(-180deg);} } .pape {transform-origin: left center;animation: flip-to-left 2s ease-in-out; }

教你輕松使用css實現(xiàn)滾動列表

活動專題中經(jīng)常有獲獎列表名單的顯示滾動等等，由于列表內(nèi)容比較多，經(jīng)常會用到滾動的方式來展示，看一下用純 css 實現(xiàn)的滾動效果。

<div class="roll" id="roll"><ul><li><span>06-09</span>[新聞]【重要公告】6月15日版本更新</li><li><span>05-28</span>[新聞]【合服公告】6月9日合服公告</li><li><span>05-25</span>[新聞]【重要公告】5月29日版本更新</li><li><span>05-24</span>[新聞]【合服公告】5月26日合服公告</li><li><span>05-24</span>[新聞]【合服公告】5月25日合服公告</li><li><span>05-14</span>[新聞]【重要公告】5月15日版本更新</li><li><span>05-12</span>[新聞]【合服公告】5月12日合服公告</li><li><span>05-11</span>[新聞]【合服公告】5月10日合服公告</li><li><span>06-09</span>[新聞]【重要公告】6月15日版本更新</li><li><span>05-28</span>[新聞]【合服公告】6月9日合服公告</li></ul> </div>

關(guān)鍵css代碼

.roll ul {list-style: none;animation: rollList 5s linear infinite; } @keyframes rollList {0% {margin-top: 0;}12.5% {margin-top: 0;}25% {margin-top: -40px;}37.5% {margin-top: -40px;}50% {margin-top: -80px;}62.5% {margin-top: -80px;}75% {margin-top: -120px;}87.5% {margin-top: -120px;}100% {margin-top: -160px;} }

既然我們可以用 css 來實現(xiàn)列表的滾動，那也就是可以用實現(xiàn)圖片的輪播滾動，在移動端越來越普及的現(xiàn)在，幾句 css 代碼實現(xiàn)，通過設(shè)置 animation-iteration-count 為 infinite ，再設(shè)置 keyframes 規(guī)則，來達到圖片輪播滾動的效果：

img {animation: move 8s linear infinite normal;animation-fill-mode: forwards; } @keyframes move {0%{transform: translateX(0px);}100%{transform: translateX(-2400px);} }

一個【開始游戲】動畫的時代變遷

石器時代，官網(wǎng)開始游戲的動畫效果都是通過 flash 的方式來進行交互，美術(shù)大佬寫 flash 動畫交互，前端小哥提供跳轉(zhuǎn)鏈接，感覺天衣無縫；但是，運營大佬說這個跳轉(zhuǎn)鏈接要改一下，美術(shù)大佬又要重新改 flash，導致這中間的流程非常的繁瑣。
flash 制作的開始游戲按鈕，可維護性也比較差，也會增加頁面內(nèi)容的大小和請求，影響頁面加載。

css3時代，人類在進步，技術(shù)也在進步。前端小哥一個人就可以包辦一切，從內(nèi)容到動畫到跳轉(zhuǎn)，一個簡單的官網(wǎng)開始游戲的動畫簡直是信手拈來，穩(wěn)穩(wěn)的提高了效率。

<a class="start icon-start" href="#" target="_blank"><span></span></a>

關(guān)鍵css代碼

.start:hover span{animation:linear icoBig 1.6s infinite;} .start:hover span:after{opacity:.6;animation:linear icoBig2 1.6s infinite;} @keyframes icoBig{0%{transform:scale(1)}20%{transform:scale(1.05)}30%{transform:scale(.93)}45%{transform:scale(1.04)}60%{transform:scale(1)} } @keyframes icoBig2{0%{transform:scale(1)}20%{transform:scale(1.3);opacity:0}100%{transform:scale(1);opacity:0} }

so easy，上面這段代碼實現(xiàn)了一個開始游戲按鈕鼠標經(jīng)過的動畫效果；通過設(shè)置 過渡次數(shù) animation-iteration-count 為 infinite（無限），過渡時間 animation-delay 為 1.6s，過渡方式 animation-timing-function 為 linear，再配合 keyframes 規(guī)則進行轉(zhuǎn)換，在 hover 的時候觸發(fā)效果。

純div+css實現(xiàn)多功能又好玩的進度條

項目中我們可能會顯示用戶vip的晉升等級，或活動專題記錄用戶領(lǐng)取禮包的天數(shù)進度等等，都可以進度條來顯示當前的進度。或者，上傳圖片的進度，下載圖片的進，都會用到進度條。看一下用純 css 的如何模擬進度條效果。

1、正常加載效果

使用 animation-fill-mode 設(shè)置為 forwards，再通過 keyframes 規(guī)則把動畫狀態(tài)設(shè)置到最后一幀的狀態(tài)，讓整個進度條達到 100%。

div {height: 10px;border: 1px solid;background: linear-gradient(rgb(0, 255, 157), #0ff);background-repeat: no-repeat;background-size: 0;animation: move 2s linear forwards; } @keyframes move {100% {background-size: 100%;} }

2、延遲效果圖

使用 animation-delay 設(shè)置延遲時間，延遲可以為負數(shù)，延遲表示動畫仿佛開始前就已經(jīng)運行過了那么長時間。

上述進度條例子，原動畫用了 2s 是從 0% 加載到 100% 的。如果設(shè)置延遲為 -1s。這動畫會從 50% 加載到 100%，仿佛已經(jīng)運行了 1s 一樣：

div {height: 10px;border: 1px solid;background: linear-gradient(#0ff, #0ff);background-repeat: no-repeat;background-size: 0;animation: move 2s -1s linear forwards; }

3、暫停效果圖

css 動畫是可以暫停的。屬性 animation-play-state 表示動畫播放狀態(tài)，默認值 running 表示播放， paused 表示暫停（鼠標經(jīng)過模擬暫停）：

.div3 {height: 10px;border: 1px solid;background: linear-gradient(#0ff, #0ff);background-repeat: no-repeat;background-size: 0;animation: move 2s linear forwards; } .div3:hover {animation-play-state: paused; } @keyframes move {100% {background-size: 100%;} }

animation-play-state 還可以與負延遲一起實現(xiàn)特殊的效果，通過設(shè)置 --percent，來達到進度的顯示，比如進度條插件：

.div4 {height: 10px;border: 1px solid;background: linear-gradient(#0ff, #0ff);background-repeat: no-repeat;background-size: 0;animation: move 100s calc(var(--percent) * -1s) linear paused;--percent: 30; } @keyframes move {100% {background-size: 100%;} }

總結(jié)

以上是生活随笔為你收集整理的css3动画-animation的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。