{"id":3420,"date":"2014-06-25T17:02:19","date_gmt":"2014-06-25T17:02:19","guid":{"rendered":"http:\/\/webninjataylor.com\/library\/?p=3420"},"modified":"2014-06-25T18:16:55","modified_gmt":"2014-06-25T18:16:55","slug":"css3-text-and-motion-experiment","status":"publish","type":"post","link":"https:\/\/webninjataylor.com\/library\/css3-text-and-motion-experiment\/","title":{"rendered":"CSS3 Text and Motion Experiment"},"content":{"rendered":"<p>Animating with CSS can be as simple as using transform and\/or transition on elements and setting the final animation state via a pseudo-class like :hover&#8230;<\/p>\n<pre>...\r\n#text {\r\n    ...\r\n    top:200px;\r\n    ...\r\n    opacity: 0;\r\n    -webkit-transition: all 2s linear;\r\n    -moz-transition: all 2s linear;\r\n}\r\n#photo {\r\n    opacity: 0.25;\r\n    -webkit-transform: scale(1.5) translate3D(0, 0, 0);\r\n    -webkit-transition: all 5s linear;\r\n    -moz-transform: scale(1.5);\r\n    -moz-transition: all 5s linear;\r\n}\r\n#container:hover #photo {\r\n    opacity: 1;\r\n    -webkit-transform: scale(1);\r\n    -moz-transform: scale(1);\r\n}\r\n#container:hover #text {\r\n    top:150px;\r\n    opacity: 1;\r\n}<\/pre>\n<p><iframe loading=\"lazy\" src=\"http:\/\/jsfiddle.net\/webninjataylor\/dpbKv\/embedded\/result\" width=\"100%\" height=\"500\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Animating with CSS can be as simple as using transform and\/or transition on elements and setting the final animation state via a pseudo-class like :hover&#8230; &#8230; #text { &#8230; top:200px; &#8230; opacity: 0; -webkit-transition: all 2s linear; -moz-transition: all 2s linear; } #photo { opacity: 0.25; -webkit-transform: scale(1.5) translate3D(0, 0, 0); -webkit-transition: all 5s linear; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[144],"tags":[19],"class_list":["post-3420","post","type-post","status-publish","format-standard","hentry","category-web-shots","tag-css"],"_links":{"self":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/3420","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/comments?post=3420"}],"version-history":[{"count":7,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/3420\/revisions"}],"predecessor-version":[{"id":3427,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/3420\/revisions\/3427"}],"wp:attachment":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/media?parent=3420"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/categories?post=3420"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/tags?post=3420"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}