How to Easily Create CSS Animations with Motion UI



CSS animations aren’t necessarily hard to understand how to use, but they can be very time consuming to write. Motion UI is a free Sass library brought to us by Zurb that can be used to quickly and easily add dozens of custom CSS animations to your projects. It comes loaded with over two dozen pre-defined animation classes, which when applied to any attribute of any particular HTML element — so even though the library is built on Sass, there isn’t really any Sass knowledge required to apply the animation effects to your elements.

Screen Shot 2016-12-10 at 5.06.31 PM

 

You should, however, be familiar with Sass if you plan on customizing any of the pre-defined animation classes. Motion UI also comes loaded with a lightweight jQuery library that you can use to create animation and animated transition effects that happen as a result of a trigger event using the .animateIn() and .animateOut() methods. Because of this library, some jQuery knowledge might also be helpful to you if you plan on using Motion UI to add smooth, clean animations to your next project.

Leave a reply
this will never be published
@