{"id":38457,"date":"2017-07-07T09:16:05","date_gmt":"2017-07-07T14:16:05","guid":{"rendered":"http:\/\/webirix.com\/?p=38457"},"modified":"2017-07-07T09:30:14","modified_gmt":"2017-07-07T14:30:14","slug":"18-librerias-css-crear-animaciones-efectos-coquetos-18-librerias-css-crear-animaciones-efectos-coquetos","status":"publish","type":"post","link":"https:\/\/webirix.com\/en\/18-librerias-css-crear-animaciones-efectos-coquetos-18-librerias-css-crear-animaciones-efectos-coquetos\/","title":{"rendered":"18 CSS libraries to create cute animations and effects 18 CSS libraries to create cute animations and effects"},"content":{"rendered":"<div class=\"article-featured\"><img decoding=\"async\" class=\"attachment-blog size-blog wp-post-image lazyload\" data-src=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/01\/CSS3.jpg\" data-sizes=\"(max-width: 725px) 100vw, 725px\" data-srcset=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/01\/CSS3.jpg 725w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/01\/CSS3-300x93.jpg 300w\" alt=\"CSS3\" width=\"725\" height=\"225\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 725px; --smush-placeholder-aspect-ratio: 725\/225;\" \/><\/div>\n<div class=\"entry-content clearfix\">\n<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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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><\/p>\n<\/div>\n<\/div>\n<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},"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 1. DynCSS 2. Spin Kit 3. Magic CSS3\u2026<\/p>","protected":false},"author":24,"featured_media":38472,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-38457","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry"],"jetpack_featured_media_url":"https:\/\/webirix.com\/wp-content\/uploads\/2017\/07\/CSS3.jpg","_links":{"self":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/38457","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\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/comments?post=38457"}],"version-history":[{"count":1,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/38457\/revisions"}],"predecessor-version":[{"id":38458,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/38457\/revisions\/38458"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/media\/38472"}],"wp:attachment":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/media?parent=38457"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/categories?post=38457"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/tags?post=38457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}