{"id":36121,"date":"2016-06-07T10:04:42","date_gmt":"2016-06-07T17:04:42","guid":{"rendered":"http:\/\/webdesignledger.com\/?p=36121"},"modified":"2016-06-02T10:36:48","modified_gmt":"2016-06-02T17:36:48","slug":"139-animation-effects-animate-css-adobe-muse","status":"publish","type":"post","link":"https:\/\/webdesignledger.com\/139-animation-effects-animate-css-adobe-muse\/","title":{"rendered":"139 Animation Effects &#8211; Animate.css in Adobe Muse"},"content":{"rendered":"<p>[youtube https:\/\/www.youtube.com\/watch?v=Cm6CuEBTHqM]<\/p>\n<p style=\"text-align: center;\"><strong>Choose from 139 Animation Effects for your Adobe Muse website. No Coding Skills Required.<\/strong><\/p>\n<p><a href=\"http:\/\/museforyoushop.com\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-35409 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/05\/muse-for-you-shop-adobe-muse-cc-logo-250x250.png\" alt=\"Muse For You - Adobe Muse CC\" width=\"100\" height=\"100\" data-srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/muse-for-you-shop-adobe-muse-cc-logo-250x250.png 250w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/muse-for-you-shop-adobe-muse-cc-logo.png 500w\" data-sizes=\"(max-width: 100px) 100vw, 100px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 100px; --smush-placeholder-aspect-ratio: 100\/100;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-35409\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/05\/muse-for-you-shop-adobe-muse-cc-logo-250x250.png\" alt=\"Muse For You - Adobe Muse CC\" width=\"100\" height=\"100\" srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/muse-for-you-shop-adobe-muse-cc-logo-250x250.png 250w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/05\/muse-for-you-shop-adobe-muse-cc-logo.png 500w\" sizes=\"(max-width: 100px) 100vw, 100px\" \/><\/noscript>\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-35410 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/05\/Adobe_Muse_logo-250x250.png\" alt=\"Adobe Muse CC Logo\" width=\"100\" height=\"100\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 100px; --smush-placeholder-aspect-ratio: 100\/100;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-35410\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/05\/Adobe_Muse_logo-250x250.png\" alt=\"Adobe Muse CC Logo\" width=\"100\" height=\"100\" \/><\/noscript><\/a><\/p>\n<p class=\"p1\">Website animations are becoming more and more popular on the web today. Animations can make your website stand out and give it more life. Two of the more popular website animation libraries are <a href=\"https:\/\/daneden.github.io\/animate.css\/\">Animate.css<\/a> and <a href=\"http:\/\/www.minimamente.com\/example\/magic_animations\/\">Magic.css<\/a>. Animate.css is well known within the web design community and many web designers and developers use it within their website. Magic.css, although not as popular as Animate.css, has many great animations that you can add to your website. With these libraries you can have elements rotate, fade in, fade out, flip, bounce, shake, pulse, vanish in, vanish out, bounce in, etc. You can visit the above libraries to see all of the animations.<\/p>\n<p class=\"p1\">\u00a0<a href=\"https:\/\/daneden.github.io\/animate.css\/\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-36124 size-medium lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/06\/animate-css-image-500x371.png\" alt=\"Animate.css Image\" width=\"500\" height=\"371\" data-srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/06\/animate-css-image-500x371.png 500w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/06\/animate-css-image.png 637w\" data-sizes=\"(max-width: 500px) 100vw, 500px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 500px; --smush-placeholder-aspect-ratio: 500\/371;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-36124 size-medium\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/06\/animate-css-image-500x371.png\" alt=\"Animate.css Image\" width=\"500\" height=\"371\" srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/06\/animate-css-image-500x371.png 500w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/06\/animate-css-image.png 637w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/noscript><\/a><\/p>\n<p class=\"p1\"><a href=\"http:\/\/www.minimamente.com\/example\/magic_animations\/\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-36123 size-medium lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/06\/mage-css-image-500x348.jpg\" alt=\"Magic.css Image\" width=\"500\" height=\"348\" data-srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/06\/mage-css-image-500x348.jpg 500w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/06\/mage-css-image-768x534.jpg 768w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/06\/mage-css-image-1024x712.jpg 1024w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/06\/mage-css-image.jpg 1103w\" data-sizes=\"(max-width: 500px) 100vw, 500px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 500px; --smush-placeholder-aspect-ratio: 500\/348;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-36123 size-medium\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/06\/mage-css-image-500x348.jpg\" alt=\"Magic.css Image\" width=\"500\" height=\"348\" srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/06\/mage-css-image-500x348.jpg 500w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/06\/mage-css-image-768x534.jpg 768w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/06\/mage-css-image-1024x712.jpg 1024w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/06\/mage-css-image.jpg 1103w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/noscript><\/a><\/p>\n<p class=\"p1\">This gave me the idea to create a widget for Adobe Muse that combined both of these libraries and allowed\u00a0users to add these animations to their Adobe Muse website. I called the widget \u201cThe Animator Widget,\u201d a name I thought was fitting for what it does :). In total there are 139 web animations that you can add to any element on your Adobe Muse website. All you have to do is add the widget, assign the widget to the element, and you immediately have animation on your website. This makes web designing in Adobe Muse a lot of fun. You can have the animation start on load, on start, on hover, on click, or on scroll. This allows\u00a0you to completely customize how you would like your users to experience the animation.<\/p>\n<div id=\"attachment_36125\" style=\"width: 360px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/museforyoushop.com\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-36125\" class=\"wp-image-36125 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/06\/muse-for-you-the-animator-widget-500x500.png\" alt=\"Muse For You - The Animator Widget - Adobe Muse CC\" width=\"350\" height=\"350\" data-srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/06\/muse-for-you-the-animator-widget-500x500.png 500w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/06\/muse-for-you-the-animator-widget-500x500-250x250.png 250w\" data-sizes=\"(max-width: 350px) 100vw, 350px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 350px; --smush-placeholder-aspect-ratio: 350\/350;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-36125\" class=\" wp-image-36125\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2016\/06\/muse-for-you-the-animator-widget-500x500.png\" alt=\"Muse For You - The Animator Widget - Adobe Muse CC\" width=\"350\" height=\"350\" srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/06\/muse-for-you-the-animator-widget-500x500.png 500w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2016\/06\/muse-for-you-the-animator-widget-500x500-250x250.png 250w\" sizes=\"(max-width: 350px) 100vw, 350px\" \/><\/noscript><\/a><p id=\"caption-attachment-36125\" class=\"wp-caption-text\">The Animator Widget Cover Art<\/p><\/div>\n<p><strong>Features Include:<\/strong><\/p>\n<ul>\n<li>Choose from 139 different animations<\/li>\n<li>Set the duration of the animation<\/li>\n<li>Add a delay to the animation before it starts<\/li>\n<li>Set how many times you would like the animation to repeat<\/li>\n<li>Infinitely loop the animation<\/li>\n<li>Add to any element on your Adobe Muse website<\/li>\n<li>Lightweight for your website<\/li>\n<\/ul>\n<p><strong>Trigger Animations:<\/strong><\/p>\n<ul>\n<li>On Load<\/li>\n<li>On Start<\/li>\n<li>On Hover<\/li>\n<li>On Click<\/li>\n<li>On Scroll<\/li>\n<\/ul>\n<p class=\"p1\">It is no wonder this widget has been one of the most popular in the <a href=\"http:\/\/museforyoushop.com\">Muse For You Shop<\/a>. Web designers and developers love engaging their audience with animations. You can choose from 139 animations and completely customize how elements animate within your Adobe Muse website. Watch the video tutorial above to see the widget in action and how it works. To access the widget visit <a href=\"http:\/\/museforyoushop.com\">http:\/\/museforyoushop.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[youtube https:\/\/www.youtube.com\/watch?v=Cm6CuEBTHqM] Choose from 139 Animation Effects for your Adobe Muse website. No Coding Skills Required. \u00a0 Website animations are becoming more and more popular on the web today. Animations can make your website stand out and give it more life. Two of the more popular website animation libraries are Animate.css and Magic.css. Animate.css is [&hellip;]<\/p>\n","protected":false},"author":1897,"featured_media":36125,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7635,476,378,6,4,31,503,479,488],"tags":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/posts\/36121"}],"collection":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/users\/1897"}],"replies":[{"embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/comments?post=36121"}],"version-history":[{"count":0,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/posts\/36121\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/media\/36125"}],"wp:attachment":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/media?parent=36121"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/categories?post=36121"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/tags?post=36121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}