{"id":323,"date":"2013-05-08T15:45:53","date_gmt":"2013-05-08T15:45:53","guid":{"rendered":"http:\/\/www.webninjataylor.com\/library\/?p=323"},"modified":"2014-06-24T21:23:23","modified_gmt":"2014-06-24T21:23:23","slug":"css3-transitions-gotchas","status":"publish","type":"post","link":"https:\/\/webninjataylor.com\/library\/css3-transitions-gotchas\/","title":{"rendered":"CSS3 Transitions Gotchas"},"content":{"rendered":"<ul>\n<li>Be very careful when using\u00a0<span class=\"code\">transition-property: all<\/span>. You\u00a0<em>will<\/em>\u00a0get\u00a0<span class=\"code\">TransitionEnd<\/span>\u00a0events for properties that you didn\u2019t expect to ever transition<\/li>\n<li>Be careful when using shorthand properties, because the number of triggered events varies between browsers<\/li>\n<li>Opera and IE don\u2019t trigger events when a negative delay cancels out the duration<\/li>\n<li>WebKit has real issues with the priority of properties such as\u00a0<span class=\"code\">transition-property: margin, margin-left<\/span>. Avoid this for now<\/li>\n<li>IE doesn\u2019t support implicit transitions \u2014 for example, triggered for\u00a0<span class=\"code\">padding: 2em<\/span>\u00a0when\u00a0<span class=\"code\">font-size<\/span>changes<\/li>\n<li>Firefox and Opera cannot parse\u00a0<span class=\"code\">transition-property: all, width<\/span><\/li>\n<li>Opera mixes up the priority of properties<\/li>\n<li>Transitions on pseudo-elements do not trigger\u00a0<span class=\"code\">TransitionEnd<\/span>\u00a0events<\/li>\n<li>IE 10 has a weird\u00a0<span class=\"code\">:hover<\/span>\u00a0bug when transitioning pseudo-elements<\/li>\n<li>The specification leaves a lot of room for improvement<\/li>\n<\/ul>\n<h2>Resources<\/h2>\n<ul>\n<li><a href=\"http:\/\/coding.smashingmagazine.com\/2013\/04\/26\/css3-transitions-thank-god-specification\/\" target=\"_blank\">CSS3 Transitions:\u00a0Thank God We Have a Specification! by Rodney\u00a0Rehm (April 26, 2013)<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Be very careful when using\u00a0transition-property: all. You\u00a0will\u00a0get\u00a0TransitionEnd\u00a0events for properties that you didn\u2019t expect to ever transition Be careful when using shorthand properties, because the number of triggered events varies between browsers Opera and IE don\u2019t trigger events when a negative delay cancels out the duration WebKit has real issues with the priority of properties such [&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,142,146],"class_list":["post-323","post","type-post","status-publish","format-standard","hentry","category-web-shots","tag-css","tag-debugging","tag-ie"],"_links":{"self":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/323","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=323"}],"version-history":[{"count":8,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/323\/revisions"}],"predecessor-version":[{"id":3367,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/323\/revisions\/3367"}],"wp:attachment":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/media?parent=323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/categories?post=323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/tags?post=323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}