這個動效工具合集真的是夠長啊！上半部分《要做動效？這75款動效工具讓你無所不能（下）》中已經為你推薦了35款，剩下的40款工具就在下面：
36.?REPAINTLESS.CSS
Repaintless.css 使用FLIP 技術讓動畫更加平滑。雖然它還有提升的空間，但是對于注重性能和表現力的設計師而言，Repaintless.css 的效果已經非常不錯了。
?
37. MIXITUP
MixItUp 同樣也是一個非常實用的庫，用來創造漂亮的顧慮、排序、插入等界面的動態效果。無需其他組件支持，并且提供足夠優秀的性能。
38.?WALLOP
Wallop 的效果和它的名字一樣，會以一種具有沖擊力的方式來展示和隱藏某個UI對象。它的潛力很大，你還可以借助它創造更加有趣的東西。
?
39. RAMJET
Ramjet 能夠幫你制作從一個元素變化為另外一個元素的動效，它能作用于DOM元素、SVG、靜態和動態的圖片。
?
40. JQUERY DRAWSVG
基于強大的jQuery 引擎，jQuery Drawsvg 能夠有效地會之處SVG內的所有路徑，制作出戲劇性的動效。
41. ANIMATIC.JS
Animatic.js 是一款強大的跨瀏覽器的動效解決方案，它集成了物理運動規則，引入了CSS轉換、3D轉換和JS來實現功能。它的主要特色在于幫你減少一次生成多個不同對象所耗費的時間精力。
?
42. MOVE.JS
Move.js 是一個簡單的工具，幫你創建縮放、傾斜、移動等常規的動效。
?
43.?EG.JS
EG.JS 是一組精心組合搭配的動態元素合集，旨在強化界面中的交互，有8個強大的組件幫你理清基本的任務。
?
44. GFX
GFX 是一個引人矚目的3D 動效庫，它能以變成的方式來構建CSS3動畫。它可以和jQuery 一起使用，輸出你所需要的效果。
45. STYLIE
Stylie 是一款有趣的工具，其中內置的4個選項卡分辨用來控制關鍵幀、緩動、導出、HTML，讓你輕松搞定動效。
?
46.?ICONATE.JS
Iconate.js 能夠讓你的轉場動效更加富有生命力，產生更加愉悅的效果。它可以同Font Awesome 聯動，還能同 Glyphicons 甚至你的自制圖標搭配起來使用。
?
47.?ANIMATEMATE
AnimateMate 是一款運用于Sketch 的小型動效生成和導出工具，它并不花哨，能夠幫你掌控關鍵幀、添加緩動功能，控制序列，等等。
?
48.?CAAT
CAAT（Canvas Advanced Animation Toolkit）是一款同JS協同的優秀框架，集合了場景、渲染技術、剪輯蒙板和標準行為包等組件。
?
49. GRANIM.JS
Granim.js 是一款小型的JS庫，通過生成漸變的動效來幫你創造有趣的視覺效果。
50. ANIMISTA
Animista 中包含了一系列常規與非常規的預定義的CSS動效，你可以在其中測試各種動效的效果，并且根據需求調整其中的參數。
?
51. OBNOXIOUS.CSS
Obnoxious.css 涵蓋了5種基于CSS的動效，能夠讓特定的元素搖擺，扭曲，放大，頻閃，也能讓字體字重自動變化。
?
52. ANIMATELO
Animatelo 包含了從強大的 Animate.css 借來的大量的醒目的動態效果，而實現方式則比后者更加便捷。
?
53. FOXHOLDER
Foxholder 是一組包含15款漂亮的動效的合集，這些動效主要用來改善用戶和表單交互的體驗。每種動效的效果各不相同，有的能夠增加邊框亮度，有的能夠強化視覺線索，等等。
?
54. RHYTHM.JS
Rhythm.js 能夠為你帶來有趣的迪斯科風的動效，它能夠營造出類似舞蹈的視覺效果。
?
55. COLORIDO.JS
Colorido.js 和 Granim.js 非常相似，這款基于JS的插件被創造出來操控色彩相關的素材的。它能夠動態地控制色調和不透明度的，不論是背景、文本、線條還是段落都在它的控制范疇以內。
?
56. BARBA.JS
Barba.js 利用PJAX（基于Ajax 技術）來減輕用戶在動效刷新時候的錯位感，讓容器在悄無聲息之間切換。
?
57. SCROLLREVEAL.JS
ScrollReveal.js 是一款用來創建滾動動效的流行工具。通過其中的 main reveal() 可以輕松管理不同的動效。它的優秀之處不止于此，它在移動端和桌面端上的效果同樣流暢。
58.?SCROLLANIM
相比于前面的許多工具，Scrollanim 更簡單，也更容易控制。它支持CSS3， 但是同樣也允許使用 JavaScript API 來添加動效。
?
59. SCROLLTRIGGER
這個工具是用來構建橫向滾動的網站頁面的。它允許使用相當簡單的語法在X軸上構建漂亮的CSS3動畫效果。
?
60. FORCE.JS
Force.js 并沒有其他動效工具中繁復多樣的選項，它只包含一些基本的、實用的動效設置選項，幫你創造微妙的動效。
?
61. AOS
AOS 這個工具的全成為 Animate on Scroll，它包含了一系列有滾動事件觸發的漂亮的預定義動效。
62.?RELLAX
Rellax 是為了漂亮的視差滾動而生的，它是一個輕量級的 Vanilla JavaScript 庫，可以幫你的界面添加有趣的3D效果。
?
63.?TILT.JS
Tilt.js 能夠產生令人著迷的傾斜視差效果，相當于是在2D的界面中模擬出3D的傾斜效果。
64. TRANSFORM-WHEN
如果你想通過網頁來講述故事，Transform-when 是一個非常不錯的解決方案，它主要幫你控制時間和滾動位置兩個因素，幫你精確控制用戶瀏覽故事過程中的每一個動效的體驗。
?
65.?CSS3 ANIMATION
這是一個比較經典的CSS3 動效控制工具，擁有實時預覽功能。
66.?CURVE.JS
Curve.js 能夠賦予線條以生命，讓它們像波浪一樣旋轉，“跳舞”。
?
67.?ANIMATOR.JS
Animator.js 是一款靈活、高效、輕量級的動效控制工具，能夠管理關鍵幀和各種不同CSS動效的效果，最關鍵的是它是完全免費的。
?
68. CEL-ANIMATION
Cel-animation 是一款 SASS mixin，可以控制關鍵字，也能設置動態SVG和任何HTML 元素。
?
69. SCROLLISSIMO
Scrollismo 是和 Greensock 聯動的動效設計工具，可以創建出隨著用戶滾動時隨之運動的動態對象。
?
70. JQCLOUDS
jqClouds 是一個非常簡單的動效插件，能在生成移動的云朵，用來填充頁面。當然，你也可以將云替換成其他的東西。
71.?COLOR ANIMATION
這個動效是用來生成動態色彩改變的工具，作用的對象可以是背景圖片、邊框、文本等元素，實際上只要是帶有色彩屬性的元素，它都能控制。
?
72.?FLUBBER
如果你想讓一個對象轉變為另外一個對象的過程更加順滑，那么你一定不要錯過 Flubber 這個工具。不過它的缺陷在于，只能作用于2D的元素。
?
73. PARTICLES.JS
如果你喜歡粒子動效，那么你可以使用這款工具來生成粒子動效，你可以輕松控制粒子的色彩、數量、大小、透明度等元素。
74. 3D LINES ANIMATION WITH THREE.JS
相比于上面功能完備的粒子動效工具，這只是一個小腳本，幫你的背景添加漂亮的粒子特效而已。可控的參數包括色彩、線條和不透明度。
75. THREE.JS
最后要推薦的是Three.js 這個功能強大的數據庫，許多令人難忘的網站背后都有著它的支持。
【搞定動效，思路很重要】
原文地址：webdesignerdepot
原文作者：Nataly Birch
優設譯文：@陳子木
本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。
【優設網 原創文章 投稿郵箱：yuan@uisdc.com】
================明星欄目推薦================
優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。
設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
標志設計標準教程
已累計誕生 729 位幸運星
發表評論 為下方 1 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓