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

• 2016-Smooth as Butter: Achieving 60 FPS Animations with CSS3: We want to give you a hand in harnessing the power of CSS3 correctly. To do just that we need to understand a few things first.

• 2017-A quick introduction to CSS animations: In this article you’ll learn the basics CSS animations, which allows you to gradually change an element’s style from one state to another.

• 2017-CSS Animations vs the Web Animations API: A Case Study: Last week, I wrote about how I created the bitsofcode logo animation with CSS. After that, it was suggested that I attempt a comparison between a CSS animation and the Web Animations API, so here it is!

• Building performant expand & collapse animations

• How to Use CSS Animations Like a Pro: Create animation magic using keyframes, animation properties like timing, delay, play state, animation-count, iteration count, direction, fill mode and will-change.

• Cubic-bezier Online Tool

• 2014-Myth Busting: CSS Animations vs. JavaScript: Jack does a lot of work with animations in the browser and has discovered that the generic opinion that “CSS is faster” just isn’t true. It’s more than that, as well. I’ll let him explain.

• 2017-Discover the Power of CSS Transforms

• 10 principles for smooth web animations

• Keyframes: Delivering scalable, high-quality animations to mobile clients

• Popular Web Animation Techniques

• GPU Animation: Doing It Right

• 一篇文章说清浏览器解析和 CSS(GPU)动画优化

• 精选！CSS 动画之工具、框架和教程

• AlloyTouch-transformjs

• 搞定这些疑难杂症，向 css3 动画说 yes

JavaScript Animation

requestAnimationFrame

• 2017-Gain Motion Superpowers with requestAnimationFrame

• intro-to-the-web-animations-api

• Understanding JavaScript’s requestAnimationFrame() method for smooth animations

• 性能更好的 js 动画实现方式——requestAnimationFrame

• CSS3 动画那么强，requestAnimationFrame 还有毛线用？

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 | 动画案例

• CSS3 动画实践 – 2017 京东集团开年大会项目有趣的动画实现

• 2017-Rythm.js : A javascript library that makes your page dance.

• turn.js

• DemoHouse

• wechat-h5-boilerplate

Loading: 加载案例

• Secret View preloader animation