纯CSS实现的加载动画：Loaders.css
g2b4
10年前
Loaders.css是一个专注性能纯CSS实现的加载动画效果。
What is this?
A collection of loading animations written entirely in css. Each animation is limited to a small subset of css properties in order to avoid expensive painting and layout calculations.
I've posted links below to some fantastic articles that go into this in a lot more detail.
Install
bower install loaders.css
Contributing
Pull requests are welcome! Create another file insrc/animationsand load it insrc/loader.scss.
In a separate tab rungulp --require coffee-script. Opendemo/demo.htmlin a browser to see your animation running.
Further research
- http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
- http://aerotwist.com/blog/pixels-are-expensive/
- http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
- http://frontendbabel.info/articles/webpage-rendering-101/
Suggested use
Wrap the surrounding container indisplay:flexand center the animation.