{"id":2427,"date":"2016-09-13T00:04:28","date_gmt":"2016-09-12T14:04:28","guid":{"rendered":"http:\/\/codemyui.com\/?p=2427"},"modified":"2018-05-17T09:53:19","modified_gmt":"2018-05-16T23:53:19","slug":"sunset-night-animation-click","status":"publish","type":"post","link":"https:\/\/codemyui.com\/sunset-night-animation-click\/","title":{"rendered":"Sunset To Night Animation On Click"},"content":{"rendered":"<p>A background animation that switches from a warm sunset to a dark night sky <a href=\"https:\/\/codemyui.com\/tag\/click-animation\/\">on click<\/a>. It was designed by Dacheng aka dSolver.<\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/78df9892f45b3765cf28536d76fd6e5e\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<p class='codepen'  data-height='502' data-theme-id='0' data-slug-hash='wzBkrB' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Animated CSS Dusk by Dacheng aka dSolver (@dSolver) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>A background animation that switches from a warm sunset to a dark night sky on click. It was designed by Dacheng aka dSolver.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/sunset-night-animation-click\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":2434,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[36516635,38934147],"class_list":["post-2427","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-click-animation","tag-hero-section","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/09\/sunset-to-night-animation-on-click-2.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":29385,"url":"https:\/\/codemyui.com\/day-night-toggle-with-background-animation\/","url_meta":{"origin":2427,"position":0},"title":"Day-Night Toggle with Background Animation","author":"Saijo George","date":"February 6, 2020","format":false,"excerpt":"This is a nice little SVG and HTML animation for a toggle switch, it has a day and night mode. During the day the background of the toggle has clouds moving right to left and a starry night sky as the switch and on click, the starry night expands and\u2026","rel":"","context":"In \"toggle switch\"","block_context":{"text":"toggle switch","link":"https:\/\/codemyui.com\/tag\/toggle-switch\/"},"img":{"alt_text":"Day-Night Toggle with Background Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Day-Night-Toggle-with-Background-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Day-Night-Toggle-with-Background-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Day-Night-Toggle-with-Background-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Day-Night-Toggle-with-Background-Animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":14391,"url":"https:\/\/codemyui.com\/hooray-message-button-click-animation\/","url_meta":{"origin":2427,"position":1},"title":"Hooray Message on Button Click Animation","author":"Hima Vincent","date":"March 30, 2017","format":false,"excerpt":"Reveal a surprise message on button click, designed by Adam Kuhn. If you are having trouble with the pen, try the archived copy on GitHub Hooray Message on Click Button","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/button-click-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/button-click-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/button-click-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/button-click-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25620,"url":"https:\/\/codemyui.com\/spilled-paint-animation-on-click\/","url_meta":{"origin":2427,"position":2},"title":"Spilled Paint Animation on Click","author":"Saijo George","date":"April 20, 2018","format":false,"excerpt":"With this snippet, we can see paint dripping from the top of the screen on mouse click. It was designed by Darryl Huffman and will look great in the hero section of any website. If you are having trouble with the pen, try the archived copy on GitHub Spilled Paint\u2026","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Spilled Paint Animation on Click","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Spilled-Paint-Animation-on-Click.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Spilled-Paint-Animation-on-Click.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Spilled-Paint-Animation-on-Click.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Spilled-Paint-Animation-on-Click.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":249,"url":"https:\/\/codemyui.com\/animated-menu-that-expands-on-click\/","url_meta":{"origin":2427,"position":3},"title":"Animated Menu that Expands on Click","author":"Hima Vincent","date":"June 18, 2015","format":false,"excerpt":"This is a pretty little experimental menu that can be shown on the sidebar and on click it expands in to the header. It can be a great way to differentiate each section in an article with a custom title for each section. By\u00a0BjurhagerStudios If you are having trouble with\u2026","rel":"","context":"In \"hover animation\"","block_context":{"text":"hover animation","link":"https:\/\/codemyui.com\/tag\/hover-animation\/"},"img":{"alt_text":"Animated Menu that Expands on Click","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/06\/animated-menu-that-expands-on-click.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/06\/animated-menu-that-expands-on-click.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/06\/animated-menu-that-expands-on-click.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/06\/animated-menu-that-expands-on-click.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":27,"url":"https:\/\/codemyui.com\/comment-card-flip-animation\/","url_meta":{"origin":2427,"position":4},"title":"Comment Card Flip Animation","author":"Hima Vincent","date":"May 19, 2016","format":false,"excerpt":"This is a cool animation in which by clicking we can flip through a stack of comment cards. Designed by Shaw If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"Comment Card Flip Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/comment-card-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/comment-card-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/comment-card-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/comment-card-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26756,"url":"https:\/\/codemyui.com\/button-to-a-list-animation\/","url_meta":{"origin":2427,"position":5},"title":"Button to a List Animation","author":"Saijo George","date":"August 8, 2018","format":false,"excerpt":"This is a fancy list that appears as a button and on click, it transforms into a list and on a second click, the list is hidden again. It was designed by Colin Horn. If you are having trouble with the pen, try the archived copy on GitHub Button to\u2026","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Button to a List Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Button-to-a-List-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Button-to-a-List-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Button-to-a-List-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Button-to-a-List-Animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/2427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=2427"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/2427\/revisions"}],"predecessor-version":[{"id":26047,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/2427\/revisions\/26047"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/2434"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=2427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=2427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=2427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}