{"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 loading=\"lazy\" decoding=\"async\" class=\"attachment-blog size-blog wp-post-image\" src=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/01\/CSS3.jpg\" sizes=\"auto, (max-width: 725px) 100vw, 725px\" 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\" \/><\/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 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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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\" rel=\"noopener noreferrer\"><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><\/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":"open","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}]}}