作為 2018 年網頁規(guī)劃的趨勢之一，網頁動效規(guī)劃已經成為現(xiàn)代網頁用戶體會的重要組成部分。不管是奇妙的轉場動效，還是掩蓋整個頁面，動畫作用無處不在。融入動效的交互細節(jié)讓現(xiàn)代網頁同以往的規(guī)劃在根本上區(qū)別開來。
對規(guī)劃師來說，CSS和HTML的成熟使規(guī)劃師變得越來越賦有構思，CSS動畫使他們的網站愈加個性，能夠快速，輕松地解說雜亂的想法，并指導用戶的行動。關于用戶而言，動畫作用讓網頁中元素的邏輯改動愈加清晰，個性化的視覺作用為用戶帶來的愉悅感觸更有助于用戶留存、增加轉化。
什么是CSS動畫？

經過 CSS3，咱們能夠創(chuàng)建動畫，無需運用處理器和需要大量內存的JavaScript或Flash。能夠更改的CSS屬性的數(shù)量或頻率沒有約束。經過為動畫指定關鍵幀來啟動CSS動畫。
今日摹客團隊為大家整理了一些國外十分優(yōu)秀的帶有動畫作用的網頁規(guī)劃案例。這些網站運用動畫來展現(xiàn)產品和服務，展現(xiàn)品牌風格，發(fā)明情緒，乃至引導用戶閱讀故事。
1. Your Plan, Your Planet
https://yourplanyourplanet.sustainability.google/
規(guī)劃師：MediaMonks
動效特征：
懸停動效
引導動效
講故事動效
Your Plan, Your Planet是由荷蘭MediaMonks公司制作的關于可繼續(xù)未來規(guī)劃的動效網頁著作。首頁導航規(guī)劃以水、食物、能量等日子元素為主，鼠標滑動挑選不同的元素的規(guī)劃技巧，與懸停動效的結合，讓整個頁面規(guī)劃十分賦有構思和規(guī)劃感。等距插圖的運用讓打造可繼續(xù)未來的規(guī)劃變得生動風趣。同時，咱們也能夠看到資料規(guī)劃更風趣的方面。
每個日子元素的動畫作用規(guī)劃和UX文案都十分賦有故事性和引導性，和用戶的每一次互動都會產生不同的結果，每一步操作都在傳播環(huán)保和可繼續(xù)發(fā)展的理念，是一個寓教于樂的動畫網頁規(guī)劃。
2. Species in Pieces
http://www.species-in-pieces.com/
規(guī)劃師：Byan James
動效特征：
過渡動效
微動效
這是一個基于CSS的交互式動效網頁規(guī)劃，它運用僅三角形片段展現(xiàn)了 30 個世界上最風趣但不幸瀕臨滅絕的物種 – 它們以碎片化的方法，幸存于文字。一切的三角碎片在每次過渡動畫中轉變成不同的顏色，組成不同的物種。每個動物都配有一個統(tǒng)計圖表，以直觀的方法展現(xiàn)了它們的進化史以及逐年銳減的物種數(shù)量。規(guī)劃師經過JavaScript和CSS將一切的過渡動作和SVG形狀聯(lián)絡起來，制作成這樣一個宣傳物種保護的網站，希望能為這些物種生存做出自己的盡力，也引發(fā)人類的考慮。
3. New Tactics - Sneak Peak
https://dribbble.com/shots/5269419-New-Tactics-Sneak-Peak
摹客iDoc，更快更簡略的產品協(xié)作規(guī)劃神器
規(guī)劃師：Quintin Lodge
動效特征：
HTML5 動效
數(shù)據(jù)動效
這個案例中運用到HTML5 動畫規(guī)劃。奇妙的漸變色網頁規(guī)劃在純色背景中運用的適可而止。顯連線的漸變色規(guī)劃和實時交互規(guī)劃讓深色背景的網頁更有活力。頁面中的信息圖標可切換到不同的形式對數(shù)據(jù)進行打開和縮放作用展現(xiàn)。那么，初見這個頁面的時分，你可能會問自己“我在看什么？”。
實際上這是兩個版本的戰(zhàn)術地圖，旨在幫助解決侵略人權的問題。第一個視圖是問題的地形或全體健康狀況的地圖。第二個是銜接視圖，它說明了與此違規(guī)行為和地圖上其他參與者相關的個人的性質和影響。在第二個視圖中銜接線條的顏色和動畫點表明這些聯(lián)絡的性質以及權利或影響力。
4. Miki Mottes
http://www.mikimottes.com/
規(guī)劃師：Miki Mottes.
動效特征：
排版動效
滾動觸發(fā)起效
加載動效
這是一個十分有意思的插畫風格的著作集動效網頁規(guī)劃。當然，這跟作者自己是插畫家，動畫師和規(guī)劃師有很大的聯(lián)絡。所以，這個風趣的網站是創(chuàng)作者風格的完美展現(xiàn)。假如你想學習經過增加一些部分動畫盤活整個網頁的規(guī)劃，這就是一個很好的比如。
出色的導航欄規(guī)劃也能夠提供良好的用戶體會。懸浮導航欄的滾動作用運用戶在訪問網站的時分邏輯更清晰，循序漸進。假如你有時刻仔細閱讀網頁，細節(jié)動畫的作用也很風趣。是個別具風格的動效網頁規(guī)劃著作。
5. Genesis
https://eatgenesis.com/
規(guī)劃師：Sam Day
動效特征：
滾動觸發(fā)起效
懸停微交互
假如只看首頁規(guī)劃，你可能認為Genesis僅僅只是一副插畫著作，但卻很難將它與食物和餐廳聯(lián)絡起來。其實，Genesis是一個提倡素食，專心于快速休閑餐飲和有機舒適食品的網站。網頁規(guī)劃特征之一是手電筒光標。隨著鼠標的滑動，所到區(qū)域將以高亮顯示。單頁規(guī)劃、鼠標懸停微交互規(guī)劃和滾動觸發(fā)起畫作用的結合運用，使得整個網站賦有神秘色彩。運用戶感到獵奇，也是一種吸引用戶的方法。
6. KIKK Festival
https://www.kikk.be/2018/en/home
規(guī)劃師：DOGSTUDIO
動效特征：
懸停動效
鼠標動效
微交互
KIKK是一個文明教育類的網頁，經過鼠標的移動路徑展現(xiàn)藍色蒙板下真實的網頁背景色。噴涂作用的光標作用很有構思，網頁中還增加了一些風趣的游標作用和心愛的小插畫，與游動的鼠標產生奇妙的微交互。
7. Onedesigncompany
https://onedesigncompany.com/
規(guī)劃師：Onedesigncompany
動效特征：
微交互
加載動效
講故事動效
在網頁規(guī)劃中運用動畫的好處清楚明了，使網頁愈加生動。但這也使等候和加載的時刻變長。那么在等候過程中為進度條加上賦有構思的加載動畫會改動用戶關于時刻的感知，經過轉移注意力的方法讓用戶等候感下降。簡略的加載動效比雜亂的更好。UX文案以敘說的方法推進微交互動畫展現(xiàn)，也是網頁規(guī)劃中常用的一種動效展現(xiàn)方法。
8. Marie Morelle
https://www.marie-morelle.com/
規(guī)劃師：Marie Morelle
動效特征：
HTML5 動效
導航欄滾動作用
鼠標動效
這是一個插畫風格的著作集網站，極具法國特征的插畫與HTML5 動畫網頁規(guī)劃的奇妙結合使網站很有吸引力。右側導航欄隨著鼠標滾動切換頁面，伴隨的頁面交互在簡練規(guī)劃的背景下顯得很有規(guī)劃感。