{"id":37808,"date":"2016-01-23T14:14:52","date_gmt":"2016-01-23T20:14:52","guid":{"rendered":"http:\/\/develop.ibox.mx\/?p=133"},"modified":"2016-08-02T08:36:40","modified_gmt":"2016-08-02T13:36:40","slug":"18-librerias-css-para-crear-animaciones-y-efectos-coquetos","status":"publish","type":"post","link":"https:\/\/webirix.com\/en\/18-librerias-css-para-crear-animaciones-y-efectos-coquetos\/","title":{"rendered":"18 CSS Libraries to Create Flirty Animations and Effects"},"content":{"rendered":"<div class=\"entry-part entry-content text\">\n<h2>1. DynCSS<\/h2>\n<p>&nbsp;<\/p>\n<h2>2. Spin Kit<\/h2>\n<p><a href=\"http:\/\/tobiasahlin.com\/spinkit\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-5852 size-full\" src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/spinkit.jpeg\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" srcset=\"https:\/\/codegeekz.com\/wp-content\/uploads\/spinkit-425x218.jpeg 425w, https:\/\/codegeekz.com\/wp-content\/uploads\/spinkit.jpeg 625w\" alt=\"spinkit - one of 18 CSS Effect Libraries for Creating Beautiful Animations \" width=\"625\" height=\"321\" \/><\/a><\/p>\n<h2>3. Magic CSS3 Animation<\/h2>\n<p><a href=\"http:\/\/www.minimamente.com\/example\/magic_animations\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-28761 size-full\" src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/Magic-Animations-CSS31.jpeg\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" srcset=\"https:\/\/codegeekz.com\/wp-content\/uploads\/Magic-Animations-CSS31-428x220.jpeg 428w, https:\/\/codegeekz.com\/wp-content\/uploads\/Magic-Animations-CSS31-300x154.jpeg 300w, https:\/\/codegeekz.com\/wp-content\/uploads\/Magic-Animations-CSS31.jpeg 625w\" alt=\"Magic Animations CSS3 - 18 CSS Effect Libraries for Creating Beautiful Animations \" width=\"625\" height=\"321\" \/><\/a><\/p>\n<h2>4. Bounce.js<\/h2>\n<p><a href=\"http:\/\/bouncejs.com\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6887 size-full\" src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/bounce-js.jpg\" alt=\"bounce-js - 18 CSS Effect Libraries for Creating Beautiful Animations \" width=\"625\" height=\"447\" \/><\/a><\/p>\n<h2>5. Buttons<\/h2>\n<p><a href=\"http:\/\/alexwolfe.github.io\/Buttons\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2812 size-full\" src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/buttons1.jpg\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" srcset=\"https:\/\/codegeekz.com\/wp-content\/uploads\/buttons1-425x232.jpg 425w, https:\/\/codegeekz.com\/wp-content\/uploads\/buttons1.jpg 625w\" alt=\"buttons - 18 CSS Effect Libraries for Creating Beautiful Animations\" width=\"625\" height=\"342\" \/><\/a><\/p>\n<h2>6. Ani.js<\/h2>\n<p><a href=\"http:\/\/anijs.github.io\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6452 size-full\" src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/anijs.jpg\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" srcset=\"https:\/\/codegeekz.com\/wp-content\/uploads\/anijs-425x215.jpg 425w, https:\/\/codegeekz.com\/wp-content\/uploads\/anijs.jpg 625w\" alt=\"anijs - 18 CSS Effect Libraries for Creating Beautiful Animations\" width=\"625\" height=\"317\" \/><\/a><\/p>\n<h2>7. Single Element CSS Spinner<\/h2>\n<p><a href=\"http:\/\/projects.lukehaas.me\/css-loaders\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6680 size-full\" src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/Single-Element-CSS-Spinners.jpeg\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" srcset=\"https:\/\/codegeekz.com\/wp-content\/uploads\/Single-Element-CSS-Spinners-425x218.jpeg 425w, https:\/\/codegeekz.com\/wp-content\/uploads\/Single-Element-CSS-Spinners.jpeg 625w\" alt=\"Single Element CSS Spinners - 18 CSS Effect Libraries for Creating Beautiful Animations\" width=\"625\" height=\"321\" \/><\/a><\/p>\n<h2>8. CSS Shakes<\/h2>\n<p><a href=\"http:\/\/elrumordelaluz.github.io\/csshake\/#1\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6890 size-full\" src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/CSS-Shake.jpeg\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" srcset=\"https:\/\/codegeekz.com\/wp-content\/uploads\/CSS-Shake-425x218.jpeg 425w, https:\/\/codegeekz.com\/wp-content\/uploads\/CSS-Shake.jpeg 625w\" alt=\"CSS Shake - 18 CSS Effect Libraries for Creating Beautiful Animations\" width=\"625\" height=\"321\" \/><\/a><\/p>\n<h2>9. Beautons<\/h2>\n<p><a href=\"http:\/\/csswizardry.com\/beautons\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6381 size-full\" src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/beautons.jpeg\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" srcset=\"https:\/\/codegeekz.com\/wp-content\/uploads\/beautons-425x218.jpeg 425w, https:\/\/codegeekz.com\/wp-content\/uploads\/beautons.jpeg 625w\" alt=\"beautons - 18 CSS Effect Libraries for Creating Beautiful Animations\" width=\"625\" height=\"321\" \/><\/a><\/p>\n<h2>10. OdoMeter<\/h2>\n<p><a href=\"http:\/\/github.hubspot.com\/odometer\/docs\/welcome\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3429\" src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/odometer.jpg\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" srcset=\"https:\/\/codegeekz.com\/wp-content\/uploads\/odometer-425x218.jpg 425w, https:\/\/codegeekz.com\/wp-content\/uploads\/odometer.jpg 625w\" alt=\"odometer\" width=\"625\" height=\"321\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h2>11. Hover.CSS<\/h2>\n<p><a href=\"http:\/\/ianlunn.github.io\/Hover\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4044\" src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/hover-css.jpg\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" srcset=\"https:\/\/codegeekz.com\/wp-content\/uploads\/hover-css-425x317.jpg 425w, https:\/\/codegeekz.com\/wp-content\/uploads\/hover-css.jpg 625w\" alt=\"hover-css\" width=\"625\" height=\"467\" \/><\/a><\/p>\n<h2>12. Kite<\/h2>\n<p><a href=\"http:\/\/hiloki.github.io\/kitecss\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6886\" src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/Kite.jpeg\" alt=\"Kite\" width=\"624\" height=\"342\" \/><\/a><\/p>\n<h2>13. Wow.js<\/h2>\n<p><a href=\"http:\/\/mynameismatthieu.com\/WOW\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4737\" src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/wowjs.jpeg\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" srcset=\"https:\/\/codegeekz.com\/wp-content\/uploads\/wowjs-425x225.jpeg 425w, https:\/\/codegeekz.com\/wp-content\/uploads\/wowjs.jpeg 625w\" alt=\"wowjs\" width=\"625\" height=\"331\" \/><\/a><\/p>\n<h2>14. Animate.CSS<\/h2>\n<p><a href=\"https:\/\/github.com\/daneden\/animate.css\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-28763\" src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/animatecss1.jpeg\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" srcset=\"https:\/\/codegeekz.com\/wp-content\/uploads\/animatecss1-402x220.jpeg 402w, https:\/\/codegeekz.com\/wp-content\/uploads\/animatecss1-300x164.jpeg 300w, https:\/\/codegeekz.com\/wp-content\/uploads\/animatecss1.jpeg 625w\" alt=\"animatecss\" width=\"625\" height=\"342\" \/><\/a><\/p>\n<h2>15. Effeckt.css<\/h2>\n<p><a href=\"https:\/\/github.com\/h5bp\/Effeckt.css\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-28764\" src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/Effecktcss.jpeg\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" srcset=\"https:\/\/codegeekz.com\/wp-content\/uploads\/Effecktcss-402x220.jpeg 402w, https:\/\/codegeekz.com\/wp-content\/uploads\/Effecktcss-300x164.jpeg 300w, https:\/\/codegeekz.com\/wp-content\/uploads\/Effecktcss.jpeg 625w\" alt=\"Effecktcss\" width=\"625\" height=\"342\" \/><\/a><\/p>\n<h2>16. Anima.js<\/h2>\n<p><a href=\"http:\/\/lvivski.com\/anima\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4551\" src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/animajs.jpg\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" srcset=\"https:\/\/codegeekz.com\/wp-content\/uploads\/animajs-425x216.jpg 425w, https:\/\/codegeekz.com\/wp-content\/uploads\/animajs.jpg 625w\" alt=\"animajs\" width=\"625\" height=\"318\" \/><\/a><\/p>\n<h2>17. Animatable<\/h2>\n<p><a href=\"http:\/\/leaverou.github.io\/animatable\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-28765\" src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/animatable.jpeg\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" srcset=\"https:\/\/codegeekz.com\/wp-content\/uploads\/animatable-402x220.jpeg 402w, https:\/\/codegeekz.com\/wp-content\/uploads\/animatable-300x164.jpeg 300w, https:\/\/codegeekz.com\/wp-content\/uploads\/animatable.jpeg 625w\" alt=\"animatable\" width=\"625\" height=\"342\" \/><\/a><\/p>\n<h2>18. Tridiv<\/h2>\n<p><a href=\"http:\/\/tridiv.com\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-28766 size-full\" src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/Tridiv2.jpg\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" srcset=\"https:\/\/codegeekz.com\/wp-content\/uploads\/Tridiv2-402x220.jpg 402w, https:\/\/codegeekz.com\/wp-content\/uploads\/Tridiv2-300x164.jpg 300w, https:\/\/codegeekz.com\/wp-content\/uploads\/Tridiv2.jpg 625w\" alt=\"Tridiv - css animations\" width=\"625\" height=\"342\" \/><\/a>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>1. DynCSS 2. Spin Kit 3. Magic CSS3 Animation 4. Bounce.js 5. Buttons 6. Ani.js 7. Single Element CSS Spinner 8. CSS Shakes 9. Beautons 10. OdoMeter 11. Hover.CSS 12. Kite 13 Wow.js 14. Animate.CSS 15. Effeckt.css 16. Anima.js 17. Animatable 18. Tridiv<\/p>","protected":false},"author":21,"featured_media":37821,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2164,2166,2172,2155],"tags":[2170,2165,2171],"class_list":["post-37808","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-desarrollo","category-html","category-jquery","tag-animaciones","tag-css","tag-efectos"],"jetpack_featured_media_url":"https:\/\/webirix.com\/wp-content\/uploads\/2016\/01\/Mobile_App_UX_Principles_cove_A4_final.png","_links":{"self":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/37808","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/comments?post=37808"}],"version-history":[{"count":1,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/37808\/revisions"}],"predecessor-version":[{"id":37822,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/37808\/revisions\/37822"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/media\/37821"}],"wp:attachment":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/media?parent=37808"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/categories?post=37808"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/tags?post=37808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}