{"id":6642,"date":"2018-10-28T06:13:31","date_gmt":"2018-10-28T06:13:31","guid":{"rendered":"http:\/\/webartdevelopers.com\/?p=6642"},"modified":"2018-10-28T06:13:31","modified_gmt":"2018-10-28T06:13:31","slug":"material-design-transition","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/material-design-transition\/","title":{"rendered":"MATERIAL DESIGN TRANSITION"},"content":{"rendered":"<p>Click any link in this block of text to load another set of text. The links don\u2019t go anywhere yet. They are just hooks to allow you to click somewhere.<\/p>\n<p>The style and animation is entirely CSS so it is smooth. JavaScript is used to add classes at the right time. It also pauses to wait for the content to be replaced, and calculates where to centre the hole. There are two stages to the animation. When a link is clicked the border-width grows very large.<br \/>\nMade by David Marland<br \/>\nOctober 20, 2014<\/p>\n<div>\n<a href=\"https:\/\/codepen.io\/djmarland\/share\/zip\/CxEbK\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Download<\/span><\/a>\n<a href=\"https:\/\/codepen.io\/djmarland\/pen\/CxEbK\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Demo and Code<\/span><\/a>\n<\/div>\n<!-- AddThis Advanced Settings generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"Click any link in this block of text to load another set of text. The links don\u2019t go anywhere yet. They are just hooks to allow you to click somewhere. The style and animation is entirely CSS so it is smooth. JavaScript is used to add classes at the right time. It also pauses to wait for the content to be replaced, and calculates where to centre the hole. There are two stages to the animation. When a link is clicked the border-width grows very large. Made by David Marland October 20, 2014<!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":6643,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1585],"tags":[20,1587,1601],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/6642"}],"collection":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/comments?post=6642"}],"version-history":[{"count":1,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/6642\/revisions"}],"predecessor-version":[{"id":6644,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/6642\/revisions\/6644"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/6643"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=6642"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=6642"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=6642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}