{"id":7597,"date":"2018-08-01T22:25:51","date_gmt":"2018-08-01T21:25:51","guid":{"rendered":"http:\/\/johnjohnston.info\/blog\/?p=7597"},"modified":"2018-08-01T22:30:16","modified_gmt":"2018-08-01T21:30:16","slug":"jgmac1106-you-might-be-interested-in-these-css-animation-experiments","status":"publish","type":"post","link":"https:\/\/johnjohnston.info\/blog\/jgmac1106-you-might-be-interested-in-these-css-animation-experiments\/","title":{"rendered":"@jgmac1106 you might be interested in these css animation experiments"},"content":{"rendered":"<p>@jgmac1106 you might be interested in these css animation experiments:<\/p>\n<p><a title=\"Not an animated gif \u2013 106 drop in\" href=\"http:\/\/johnjohnston.info\/106\/not-an-animated-gif\/\">Not an animated gif \u2013 106 drop in<\/a><\/p>\n<p><a title=\"CSS phenakistiscope\" href=\"http:\/\/phenakistiscope.surge.sh\/\">CSS phenakistiscope<\/a><\/p>\n<p><a title=\"More phenakistoscope\" href=\"http:\/\/phenakistiscope.surge.sh\/more.html\">More phenakistoscope<\/a><\/p>\n<style type=\"text\/css\" media=\"screen\"><!-- .dancesprite { margin:auto; width: 480px; height: 360px; background-image: url(\"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2018\/08\/dance.jpg\"); -webkit-animation: play 5s steps(22) infinite; -moz-animation: play 5s steps(22) infinite; -ms-animation: play 5s steps(22) infinite; -o-animation: play 5s steps(22) infinite; animation: play 5s steps(22) infinite; } @-webkit-keyframes play { from { background-position: 0px; } to { background-position: -10560px; } } @-moz-keyframes play { from { background-position: 0px; } to { background-position: -10560px; } } @-ms-keyframes play { from { background-position: 0px; } to { background-position: -10560px; } } @-o-keyframes play { from { background-position: 0px; } to { background-position: -10560px; } } @keyframes play { from { background-position: 0px; } to { background-position: -10560px; } } --><\/style>\n<div id=\"sprite1\" class=\"dancesprite\"><\/div>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_7600\" aria-describedby=\"caption-attachment-7600\" style=\"width: 10560px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2018\/08\/dance.jpg\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"7600\" data-permalink=\"https:\/\/johnjohnston.info\/blog\/jgmac1106-you-might-be-interested-in-these-css-animation-experiments\/dance\/\" data-orig-file=\"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2018\/08\/dance.jpg\" data-orig-size=\"10560,360\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dance\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2018\/08\/dance-1024x35.jpg\" class=\"wp-image-7600 size-full\" src=\"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2018\/08\/dance.jpg\" alt=\"\" width=\"10560\" height=\"360\" srcset=\"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2018\/08\/dance.jpg 10560w, https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2018\/08\/dance-620x21.jpg 620w, https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2018\/08\/dance-768x26.jpg 768w, https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2018\/08\/dance-1024x35.jpg 1024w, https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2018\/08\/dance-668x23.jpg 668w\" sizes=\"auto, (max-width: 10560px) 100vw, 10560px\" \/><\/a><figcaption id=\"caption-attachment-7600\" class=\"wp-caption-text\">This is a jpg that is 10560 pixels wide.<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>@jgmac1106 you might be interested in these css animation experiments: Not an animated gif \u2013 106 drop in CSS phenakistiscope More phenakistoscope &nbsp;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"status","meta":{"mf2_syndication":["https:\/\/twitter.com\/johnjohnston\/status\/1024768543072641033"],"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"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,"webmentions_disabled_pings":false,"webmentions_disabled":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[817],"tags":[209,79,485],"post_format":[642],"class_list":{"0":"post-7597","1":"post","2":"type-post","3":"status-publish","4":"format-status","6":"category-reactions","7":"tag-animation","8":"tag-css","9":"tag-ds106","10":"post_format-post-format-status","11":"kind-note","13":"h-entry","14":"hentry"},"better_featured_image":null,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p57zFQ-1Yx","jetpack_likes_enabled":false,"jetpack_sharing_enabled":true,"kind":false,"_links":{"self":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts\/7597","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/comments?post=7597"}],"version-history":[{"count":8,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts\/7597\/revisions"}],"predecessor-version":[{"id":7606,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts\/7597\/revisions\/7606"}],"wp:attachment":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/media?parent=7597"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/categories?post=7597"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/tags?post=7597"},{"taxonomy":"post_format","embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/post_format?post=7597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}