Web Animation List

  • 2016-A Guide to Browser Scroll Animations: In this article, we’ll look at multiple options for implementing scroll animations, from building them from scratch yourself to using some existing libraries.

  • 2017-CSS Glitch Effect: An experimental glitch effect powered by CSS animations and the clip-path property. Inspired by the technique seen on the speakers page of the 404 conference.

  • 2017-不会做动画的前端不是好开发:在动画方面能紧跟技术趋势的优秀前端实在是比较难找,本文则希望让那些想在动画方面有些提升的朋友有所帮助。

  • Popmotion: Popmotion 提供了一个与以上两个动画框架的特性对比

CSS3 Animation

JavaScript Animation


Animation Engine:动画引擎

  • react-overdrive : Super easy magic-move transitions for React apps. 能够在不同的页面间指定相同 ID 的元素,Overdrive 会自动为这两个元素之间添加转场动画。

  • 2017-flubber : Tools for smoother shape animations.

  • Anime.js

  • mojs

Animation Case | 动画案例

Loading: 加载案例