{"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 decoding=\"async\" class=\"alignnone wp-image-5852 size-full lazyload\" data-src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/spinkit.jpeg\" data-sizes=\"(max-width: 625px) 100vw, 625px\" data-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\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 625px; --smush-placeholder-aspect-ratio: 625\/321;\" \/><\/a><\/p>\n<h2>3. Magic CSS3 Animation<\/h2>\n<p><a href=\"http:\/\/www.minimamente.com\/example\/magic_animations\/\" target=\"_blank\"><img decoding=\"async\" class=\"alignnone wp-image-28761 size-full lazyload\" data-src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/Magic-Animations-CSS31.jpeg\" data-sizes=\"(max-width: 625px) 100vw, 625px\" data-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\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 625px; --smush-placeholder-aspect-ratio: 625\/321;\" \/><\/a><\/p>\n<h2>4. Bounce.js<\/h2>\n<p><a href=\"http:\/\/bouncejs.com\/\" target=\"_blank\"><img decoding=\"async\" class=\"alignnone wp-image-6887 size-full lazyload\" data-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\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 625px; --smush-placeholder-aspect-ratio: 625\/447;\" \/><\/a><\/p>\n<h2>5. Buttons<\/h2>\n<p><a href=\"http:\/\/alexwolfe.github.io\/Buttons\/\" target=\"_blank\"><img decoding=\"async\" class=\"alignnone wp-image-2812 size-full lazyload\" data-src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/buttons1.jpg\" data-sizes=\"(max-width: 625px) 100vw, 625px\" data-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\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 625px; --smush-placeholder-aspect-ratio: 625\/342;\" \/><\/a><\/p>\n<h2>6. Ani.js<\/h2>\n<p><a href=\"http:\/\/anijs.github.io\/\" target=\"_blank\"><img decoding=\"async\" class=\"alignnone wp-image-6452 size-full lazyload\" data-src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/anijs.jpg\" data-sizes=\"(max-width: 625px) 100vw, 625px\" data-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\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 625px; --smush-placeholder-aspect-ratio: 625\/317;\" \/><\/a><\/p>\n<h2>7. Single Element CSS Spinner<\/h2>\n<p><a href=\"http:\/\/projects.lukehaas.me\/css-loaders\/\" target=\"_blank\"><img decoding=\"async\" class=\"alignnone wp-image-6680 size-full lazyload\" data-src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/Single-Element-CSS-Spinners.jpeg\" data-sizes=\"(max-width: 625px) 100vw, 625px\" data-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\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 625px; --smush-placeholder-aspect-ratio: 625\/321;\" \/><\/a><\/p>\n<h2>8. CSS Shakes<\/h2>\n<p><a href=\"http:\/\/elrumordelaluz.github.io\/csshake\/#1\" target=\"_blank\"><img decoding=\"async\" class=\"alignnone wp-image-6890 size-full lazyload\" data-src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/CSS-Shake.jpeg\" data-sizes=\"(max-width: 625px) 100vw, 625px\" data-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\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 625px; --smush-placeholder-aspect-ratio: 625\/321;\" \/><\/a><\/p>\n<h2>9. Beautons<\/h2>\n<p><a href=\"http:\/\/csswizardry.com\/beautons\/\" target=\"_blank\"><img decoding=\"async\" class=\"alignnone wp-image-6381 size-full lazyload\" data-src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/beautons.jpeg\" data-sizes=\"(max-width: 625px) 100vw, 625px\" data-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\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 625px; --smush-placeholder-aspect-ratio: 625\/321;\" \/><\/a><\/p>\n<h2>10. OdoMeter<\/h2>\n<p><a href=\"http:\/\/github.hubspot.com\/odometer\/docs\/welcome\/\" target=\"_blank\"><img decoding=\"async\" class=\"alignnone size-full wp-image-3429 lazyload\" data-src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/odometer.jpg\" data-sizes=\"(max-width: 625px) 100vw, 625px\" data-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\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 625px; --smush-placeholder-aspect-ratio: 625\/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 decoding=\"async\" class=\"alignnone size-full wp-image-4044 lazyload\" data-src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/hover-css.jpg\" data-sizes=\"(max-width: 625px) 100vw, 625px\" data-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\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 625px; --smush-placeholder-aspect-ratio: 625\/467;\" \/><\/a><\/p>\n<h2>12. Kite<\/h2>\n<p><a href=\"http:\/\/hiloki.github.io\/kitecss\/\" target=\"_blank\"><img decoding=\"async\" class=\"alignnone size-full wp-image-6886 lazyload\" data-src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/Kite.jpeg\" alt=\"Kite\" width=\"624\" height=\"342\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 624px; --smush-placeholder-aspect-ratio: 624\/342;\" \/><\/a><\/p>\n<h2>13. Wow.js<\/h2>\n<p><a href=\"http:\/\/mynameismatthieu.com\/WOW\/\" target=\"_blank\"><img decoding=\"async\" class=\"alignnone size-full wp-image-4737 lazyload\" data-src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/wowjs.jpeg\" data-sizes=\"(max-width: 625px) 100vw, 625px\" data-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\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 625px; --smush-placeholder-aspect-ratio: 625\/331;\" \/><\/a><\/p>\n<h2>14. Animate.CSS<\/h2>\n<p><a href=\"https:\/\/github.com\/daneden\/animate.css\" target=\"_blank\"><img decoding=\"async\" class=\"alignnone size-full wp-image-28763 lazyload\" data-src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/animatecss1.jpeg\" data-sizes=\"(max-width: 625px) 100vw, 625px\" data-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\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 625px; --smush-placeholder-aspect-ratio: 625\/342;\" \/><\/a><\/p>\n<h2>15. Effeckt.css<\/h2>\n<p><a href=\"https:\/\/github.com\/h5bp\/Effeckt.css\" target=\"_blank\"><img decoding=\"async\" class=\"alignnone size-full wp-image-28764 lazyload\" data-src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/Effecktcss.jpeg\" data-sizes=\"(max-width: 625px) 100vw, 625px\" data-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\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 625px; --smush-placeholder-aspect-ratio: 625\/342;\" \/><\/a><\/p>\n<h2>16. Anima.js<\/h2>\n<p><a href=\"http:\/\/lvivski.com\/anima\/\" target=\"_blank\"><img decoding=\"async\" class=\"alignnone size-full wp-image-4551 lazyload\" data-src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/animajs.jpg\" data-sizes=\"(max-width: 625px) 100vw, 625px\" data-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\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 625px; --smush-placeholder-aspect-ratio: 625\/318;\" \/><\/a><\/p>\n<h2>17. Animatable<\/h2>\n<p><a href=\"http:\/\/leaverou.github.io\/animatable\/\" target=\"_blank\"><img decoding=\"async\" class=\"alignnone size-full wp-image-28765 lazyload\" data-src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/animatable.jpeg\" data-sizes=\"(max-width: 625px) 100vw, 625px\" data-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\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 625px; --smush-placeholder-aspect-ratio: 625\/342;\" \/><\/a><\/p>\n<h2>18. Tridiv<\/h2>\n<p><a href=\"http:\/\/tridiv.com\/\" target=\"_blank\"><img decoding=\"async\" class=\"alignnone wp-image-28766 size-full lazyload\" data-src=\"http:\/\/codegeekz.com\/wp-content\/uploads\/Tridiv2.jpg\" data-sizes=\"(max-width: 625px) 100vw, 625px\" data-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\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 625px; --smush-placeholder-aspect-ratio: 625\/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":"closed","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}]}}