Twitter’s Heart Animation in Full CSS
Nicolas Escoffier
53210

The animation can be fully jank free:

  1. Using `transform: scale(x)` and `transform-origin` to replace the animating of left and top,to decrease browser reflow;
  2. box-shadow also cause browser repaint which can be taken placed by `transform: translate3d`
  3. The most complex part is the Ring, which can be implemented by two circles scaled with different speeds, which remove reflow + repaint by animating border at all

All animation is powered by GPU compositing and high performance now!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.