{"id":3434,"date":"2014-06-25T18:38:38","date_gmt":"2014-06-25T18:38:38","guid":{"rendered":"http:\/\/webninjataylor.com\/library\/?p=3434"},"modified":"2014-06-25T18:42:04","modified_gmt":"2014-06-25T18:42:04","slug":"css3-animation-with-transform-scalen-n","status":"publish","type":"post","link":"https:\/\/webninjataylor.com\/library\/css3-animation-with-transform-scalen-n\/","title":{"rendered":"CSS3 Animation with transform: scale(n, n);"},"content":{"rendered":"<p><iframe loading=\"lazy\" src=\"http:\/\/jsfiddle.net\/webninjataylor\/EDWyR\/embedded\/result\" width=\"100%\" height=\"300\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<pre>&lt;div class=\"animateable\"&gt;&lt;\/div&gt;<\/pre>\n<pre>\/******** SCALE ********\/\r\n.animateable {\r\n    ...\r\n    animation: inout 2s;\r\n        -webkit-animation: inout 2s;\r\n    animation-iteration-count: 1;\r\n        -webkit-animation-iteration-count: 1;\r\n}\r\n@keyframes inout {\r\n    0% {\r\n        transform: scale(0, 0);\r\n    }\r\n    50% {\r\n        transform: scale(2, 2);\r\n    }\r\n    100% {\r\n        transform: scale(1, 1);\r\n    }\r\n}\r\n@-webkit-keyframes inout {\r\n    \/* Safari &amp; Chrome *\/\r\n    0% {\r\n        -webkit-transform: scale(0, 0);\r\n    }\r\n    50% {\r\n        -webkit-transform: scale(2, 2);\r\n    }\r\n    100% {\r\n        -webkit-transform: scale(1, 1);\r\n    }\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>&lt;div class=&#8221;animateable&#8221;&gt;&lt;\/div&gt; \/******** SCALE ********\/ .animateable { &#8230; animation: inout 2s; -webkit-animation: inout 2s; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; } @keyframes inout { 0% { transform: scale(0, 0); } 50% { transform: scale(2, 2); } 100% { transform: scale(1, 1); } } @-webkit-keyframes inout { \/* Safari &amp; Chrome *\/ 0% { -webkit-transform: scale(0, 0); } [&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-3434","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\/3434","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=3434"}],"version-history":[{"count":5,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/3434\/revisions"}],"predecessor-version":[{"id":3439,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/3434\/revisions\/3439"}],"wp:attachment":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/media?parent=3434"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/categories?post=3434"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/tags?post=3434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}