{"id":589,"date":"2013-02-16T18:07:37","date_gmt":"2013-02-16T18:07:37","guid":{"rendered":"http:\/\/johnjohnston.info\/106\/?p=589"},"modified":"2013-02-16T18:07:37","modified_gmt":"2013-02-16T18:07:37","slug":"not-an-animated-gif","status":"publish","type":"post","link":"https:\/\/johnjohnston.info\/106\/not-an-animated-gif\/","title":{"rendered":"Not an animated gif"},"content":{"rendered":"<style type=\"text\/css\" media=\"screen\"><!--\n.jg { margin:auto; width: 203px; height: 203px; background-image: url(\"https:\/\/johnjohnston.info\/106\/wp-content\/uploads\/2013\/02\/jgsprites.png\");  -webkit-animation: play 1.5s steps(9) infinite;  -moz-animation: play 1.5s steps(9) infinite; -ms-animation: play 1.5s steps(9) infinite; -o-animation: play 1.5s steps(9) infinite; animation: play 1.5s steps(9) infinite; }  @-webkit-keyframes play { from { background-position:    0px; } to { background-position: -1827px; } }  @-moz-keyframes play { from { background-position:    0px; } to { background-position: -1827px; } }  @-ms-keyframes play { from { background-position:    0px; } to { background-position: -1827px; } }  @-o-keyframes play { from { background-position:    0px; } to { background-position: -1827px; } }  @keyframes play { from { background-position:    0px; } to { background-position: -1827px; } }  \n--><\/style>\n<div class=\"jg\"><\/div>\n<p>Using this png and CSS sprites.<br \/>\n<a href=\"http:\/\/johnjohnston.info\/106\/wp-content\/uploads\/2013\/02\/jgsprites.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-590\" alt=\"jgsprites\" src=\"https:\/\/johnjohnston.info\/106\/wp-content\/uploads\/2013\/02\/jgsprites-300x33.png\" width=\"300\" height=\"33\" srcset=\"https:\/\/johnjohnston.info\/106\/wp-content\/uploads\/2013\/02\/jgsprites-300x33.png 300w, https:\/\/johnjohnston.info\/106\/wp-content\/uploads\/2013\/02\/jgsprites-1024x113.png 1024w, https:\/\/johnjohnston.info\/106\/wp-content\/uploads\/2013\/02\/jgsprites.png 1827w\" sizes=\"auto, (max-width: 300px) 85vw, 300px\" \/><\/a><\/p>\n<p>Copying <a href=\"http:\/\/jsfiddle.net\/simurai\/CGmCe\/\">CSS sprite sheet animation &#8211; jsFiddle<\/a><br \/>\nUsing my much reused favourite (of the ones I&#8217;ve made) animated gif. I converted it to a long strip.<\/p>\n<p>So the CSS without the vendor prefixes<\/p>\n<pre><code>\r\n.jg {\r\n\tmargin:auto;\r\n    width: 203px;\r\n    height: 203px;\r\n    background-image: url(\"jgsprites.png\");\r\n\tanimation: play 1.5s steps(9) infinite;<\/code><\/pre>\n<p>}<\/p>\n<p>@-webkit-keyframes play {<br \/>\nfrom { background-position: 0px; }<br \/>\nto { background-position: -1827px; }<br \/>\n}<\/p>\n<p>I had to strip all of the returns out of the CSS and paste it into the WordPress blog editor to get it to work.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Using this png and CSS sprites. Copying CSS sprite sheet animation &#8211; jsFiddle Using my much reused favourite (of the ones I&#8217;ve made) animated gif. I converted it to a long strip. So the CSS without the vendor prefixes .jg { margin:auto; width: 203px; height: 203px; background-image: url(&#8220;jgsprites.png&#8221;); animation: play 1.5s steps(9) infinite; } @-webkit-keyframes &hellip; <a href=\"https:\/\/johnjohnston.info\/106\/not-an-animated-gif\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Not an animated gif&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[74,73],"tags":[],"class_list":["post-589","post","type-post","status-publish","format-standard","hentry","category-animatedgif","category-remix"],"better_featured_image":null,"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3RLlC-9v","_links":{"self":[{"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/posts\/589","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/comments?post=589"}],"version-history":[{"count":7,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/posts\/589\/revisions"}],"predecessor-version":[{"id":597,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/posts\/589\/revisions\/597"}],"wp:attachment":[{"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/media?parent=589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/categories?post=589"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/tags?post=589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}