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

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