Submit your widget

Pure CSS3 Loading Animations effect

Created 5 years ago   Views 20947   downloads 3196    Author onextrapixel
Pure CSS3 Loading Animations effect
View DemoDownload 18.7 KB
79
Share |

This is a little experiment,and the cutting edge CSS animation to create a gif-like AJAX loading icon purely from CSS. The idea here is to try to manipulate HTML objects using only CSS and minimal HTML markup so we do not have to rely on gif images or JS.

The purpose of this post is to show you the possibilities of CSS. The content may or may not be practical to use in real life. The demo provided works best on Chrome, and partially works on Firefox and Safari.

THE ADVANTAGES OF USING CSS ANIMATION OVER GIF/JS

  • It gave me more control of my animation. I found that it was much more convenient to edit elements and change animation speed via CSS rather than going through the Photoshop process.
  • CSS animations use GPU acceleration which is much faster than animating with JS and much lighter in terms of size when compare to gif images.
  • CSS allows the users to be able to interact with the animation as the developer intended. For gif images, there is no interaction between the users and the animation.

ON THE OTHER HAND, THERE ARE SOME DRAWBACKS AS WELL

  • CSS animation is not widely supported yet. The browsers that supports it are still buggy as well. For example, in our demo, some animations don't work on Safari, but work well on Chrome.

Read more:http://www.onextrapixel.com/2013/07/22/fun-css-loading-animations/

Tag: css3