{"id":252,"date":"2018-09-26T14:42:58","date_gmt":"2018-09-26T14:42:58","guid":{"rendered":"https:\/\/jmrowe.com\/blog\/?p=252"},"modified":"2018-09-26T19:40:29","modified_gmt":"2018-09-26T19:40:29","slug":"css3-notes","status":"publish","type":"post","link":"https:\/\/jmrowe.com\/blog\/css3-notes\/","title":{"rendered":"CSS3 Notes"},"content":{"rendered":"<p><code><\/code><\/p>\n<h3>CSS3 Animation<\/h3>\n<p><code>animation: flip 1s linear 2s 1 normal ;<\/code><\/p>\n<p><strong>Properties<\/strong><\/p>\n<p>name &#8211; Name of the animation used when creating the keyframes<br \/>\nduration &#8211; How long the animation lasts<br \/>\ntiming-function &#8211; Determines the actual speed of the animation (i.e. linear \/ ease \/ ease-in \/ ease-out )<br \/>\ndelay &#8211; how long before the animation is actually performed.<br \/>\niteration-count &#8211; how many times the animation will happen.<br \/>\ndirection &#8211; Wether the animation performs keyframes 0 to 100 or 100 to 0.<br \/>\nfill-mode &#8211; defines what style will be applied before or after the animation is done.<\/p>\n<h3>Transform<\/h3>\n<p>translate value works a bit like that of relative positioning, pushing and pulling an element in different directions without interrupting the normal flow of the document.\u00a0\u00a0Positive values will push an element down and to the right of its default position while negative values will pull an element up and to the left of its default position.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS3 Animation animation: flip 1s linear 2s 1 normal ; Properties name &#8211; Name of the animation used when creating the keyframes duration &#8211; How long the animation lasts timing-function &#8211; Determines the actual speed of the animation (i.e. linear \/ ease \/ ease-in \/ ease-out ) delay &#8211; how long before the animation is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-252","post","type-post","status-publish","format-standard","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/comments?post=252"}],"version-history":[{"count":9,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/252\/revisions"}],"predecessor-version":[{"id":261,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/252\/revisions\/261"}],"wp:attachment":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/media?parent=252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/categories?post=252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/tags?post=252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}