{"id":2145,"date":"2016-12-11T22:09:59","date_gmt":"2016-12-11T22:09:59","guid":{"rendered":"http:\/\/cssreset.com\/?p=2145"},"modified":"2016-12-11T22:09:59","modified_gmt":"2016-12-11T22:09:59","slug":"how-to-easily-create-css-animations-with-motion-ui","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/how-to-easily-create-css-animations-with-motion-ui\/","title":{"rendered":"How to Easily Create CSS Animations with Motion UI"},"content":{"rendered":"

CSS animations aren’t necessarily hard to understand how to use, but they can be very time consuming to write.\u00a0Motion UI<\/a> is a free Sass library brought to us by Zurb<\/a> 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.<\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

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.<\/p>\n

Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

CSS animations aren’t necessarily hard to understand how to use, but they can be very time consuming to write.\u00a0Motion UI is a free Sass library brought to us by Zurb that can be used to quickly and easily add dozens […]<\/p>\n

Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2145"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2145"}],"version-history":[{"count":1,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2145\/revisions"}],"predecessor-version":[{"id":2147,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2145\/revisions\/2147"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2145"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}