{"id":2080,"date":"2016-07-03T21:31:38","date_gmt":"2016-07-03T20:31:38","guid":{"rendered":"http:\/\/johnjohnston.info\/106\/?p=2080"},"modified":"2016-07-03T21:31:38","modified_gmt":"2016-07-03T20:31:38","slug":"css-phenakistiscope","status":"publish","type":"post","link":"https:\/\/johnjohnston.info\/106\/css-phenakistiscope\/","title":{"rendered":"CSS phenakistiscope"},"content":{"rendered":"<blockquote class=\"twitter-tweet\" data-width=\"550\">\n<p lang=\"en\" dir=\"ltr\"><a href=\"https:\/\/twitter.com\/cogdog\">@cogdog<\/a> lovely stuffI didn&#39;t recognise\/recall word but got a phenakistiscope here. I think <a href=\"https:\/\/twitter.com\/jimgroom\">@jimgroom<\/a> has one too <a href=\"https:\/\/t.co\/40UQfNr6Ms\">pic.twitter.com\/40UQfNr6Ms<\/a><\/p>\n<p>&mdash; john johnston (@johnjohnston) <a href=\"https:\/\/twitter.com\/johnjohnston\/status\/746598360363184128\">June 25, 2016<\/a><\/p><\/blockquote>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>The linked site: <a href=\"http:\/\/www.succursale.org\/anim\/phenakistiscope-de-bal\/\">phenakistiscope de bal | Succursale | Ruppert &amp; Mulot<\/a> is indeed lovely. It uses Flash. This got me thinking a wee bit about CSS animations.<\/p>\n<p><a href=\"http:\/\/phenakistiscope.surge.sh\/\">CSS phenakistiscope<\/a> was a first test, followed by <a href=\"http:\/\/phenakistiscope.surge.sh\/more.html\">More phenakistoscope<\/a>.<\/p>\n<p>Here is an example (click on the image to see it without animation):<\/p>\n<p><a href=\"http:\/\/johnjohnston.info\/106\/wp-content\/uploads\/2016\/07\/bird-cat-12.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2087 catchase\" src=\"https:\/\/johnjohnston.info\/106\/wp-content\/uploads\/2016\/07\/bird-cat-12.png\" alt=\"bird-cat-12\" width=\"640\" height=\"639\" srcset=\"https:\/\/johnjohnston.info\/106\/wp-content\/uploads\/2016\/07\/bird-cat-12.png 640w, https:\/\/johnjohnston.info\/106\/wp-content\/uploads\/2016\/07\/bird-cat-12-150x150.png 150w, https:\/\/johnjohnston.info\/106\/wp-content\/uploads\/2016\/07\/bird-cat-12-300x300.png 300w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/a><\/p>\n<p>Image from: <a href=\"https:\/\/www.flickr.com\/photos\/ncssm\/\">NCSSM | Flickr &#8211; Photo Sharing!<\/a> used under a <a href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/2.0\/\">Creative Commons \u2014 Attribution-NonCommercial-ShareAlike 2.0 Generic \u2014 CC BY-NC-SA 2.0<\/a><\/p>\n<p>There are more examples on the pages linked above, but I&#8217;ve added the following css to this blog (using the jetpack css module).<\/p>\n<p><!-- HTML generated using hilite.me --><\/p>\n<div style=\"background: #272822; overflow: auto; width: auto; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #a6e22e;\">.catchase<\/span> <span style=\"color: #f8f8f2;\">{<\/span>\n    <span style=\"color: #f8f8f2;\">animation<\/span><span style=\"color: #f92672;\">-<\/span><span style=\"color: #f8f8f2;\">duration<\/span><span style=\"color: #f92672;\">:<\/span> <span style=\"color: #ae81ff;\">2s<\/span><span style=\"color: #f8f8f2;\">;<\/span>\n    <span style=\"color: #f8f8f2;\">animation<\/span><span style=\"color: #f92672;\">-<\/span><span style=\"color: #f8f8f2;\">timing<\/span><span style=\"color: #f92672;\">-<\/span><span style=\"color: #f8f8f2;\">function<\/span><span style=\"color: #f92672;\">:<\/span> <span style=\"color: #f8f8f2;\">steps(<\/span><span style=\"color: #ae81ff;\">13<\/span><span style=\"color: #f92672;\">,<\/span><span style=\"color: #f8f8f2;\">end);<\/span>\n    <span style=\"color: #f8f8f2;\">animation<\/span><span style=\"color: #f92672;\">-<\/span><span style=\"color: #f8f8f2;\">name<\/span><span style=\"color: #f92672;\">:<\/span> <span style=\"color: #f8f8f2;\">anticlockwise;<\/span>\n    <span style=\"color: #f8f8f2;\">animation<\/span><span style=\"color: #f92672;\">-<\/span><span style=\"color: #f8f8f2;\">iteration<\/span><span style=\"color: #f92672;\">-<\/span><span style=\"color: #f8f8f2;\">count<\/span><span style=\"color: #f92672;\">:<\/span> <span style=\"color: #f8f8f2;\">infinite;<\/span>\n<span style=\"color: #f8f8f2;\">}<\/span>\n\n<span style=\"color: #66d9ef;\">@keyframes<\/span> <span style=\"color: #f92672;\">anticlockwise<\/span> <span style=\"color: #f8f8f2;\">{<\/span>\n    <span style=\"color: #f92672;\">to<\/span> <span style=\"color: #f8f8f2;\">{<\/span>\n        <span style=\"color: #f92672;\">-<\/span><span style=\"color: #f8f8f2;\">ms<\/span><span style=\"color: #f92672;\">-<\/span><span style=\"color: #f8f8f2;\">transform<\/span><span style=\"color: #f92672;\">:<\/span> <span style=\"color: #f8f8f2;\">rotate(<\/span><span style=\"color: #ae81ff;\">0<\/span><span style=\"color: #f8f8f2;\">deg);<\/span>\n        <span style=\"color: #f92672;\">-<\/span><span style=\"color: #f8f8f2;\">moz<\/span><span style=\"color: #f92672;\">-<\/span><span style=\"color: #f8f8f2;\">transform<\/span><span style=\"color: #f92672;\">:<\/span> <span style=\"color: #f8f8f2;\">rotate(<\/span><span style=\"color: #ae81ff;\">0<\/span><span style=\"color: #f8f8f2;\">deg);<\/span>\n        <span style=\"color: #f92672;\">-<\/span><span style=\"color: #f8f8f2;\">webkit<\/span><span style=\"color: #f92672;\">-<\/span><span style=\"color: #f8f8f2;\">transform<\/span><span style=\"color: #f92672;\">:<\/span> <span style=\"color: #f8f8f2;\">rotate(<\/span><span style=\"color: #ae81ff;\">0<\/span><span style=\"color: #f8f8f2;\">deg);<\/span>\n        <span style=\"color: #f92672;\">-<\/span><span style=\"color: #f8f8f2;\">o<\/span><span style=\"color: #f92672;\">-<\/span><span style=\"color: #f8f8f2;\">transform<\/span><span style=\"color: #f92672;\">:<\/span> <span style=\"color: #f8f8f2;\">rotate(<\/span><span style=\"color: #ae81ff;\">0<\/span><span style=\"color: #f8f8f2;\">deg);<\/span>\n        <span style=\"color: #f8f8f2;\">transform<\/span><span style=\"color: #f92672;\">:<\/span> <span style=\"color: #f8f8f2;\">rotate(<\/span><span style=\"color: #ae81ff;\">0<\/span><span style=\"color: #f8f8f2;\">deg);<\/span>\n    <span style=\"color: #f8f8f2;\">}<\/span>\n    \n    <span style=\"color: #f92672;\">from<\/span> <span style=\"color: #f8f8f2;\">{<\/span>\n        <span style=\"color: #f92672;\">-<\/span><span style=\"color: #f8f8f2;\">ms<\/span><span style=\"color: #f92672;\">-<\/span><span style=\"color: #f8f8f2;\">transform<\/span><span style=\"color: #f92672;\">:<\/span> <span style=\"color: #f8f8f2;\">rotate(<\/span><span style=\"color: #ae81ff;\">360<\/span><span style=\"color: #f8f8f2;\">deg);<\/span>\n        <span style=\"color: #f92672;\">-<\/span><span style=\"color: #f8f8f2;\">moz<\/span><span style=\"color: #f92672;\">-<\/span><span style=\"color: #f8f8f2;\">transform<\/span><span style=\"color: #f92672;\">:<\/span> <span style=\"color: #f8f8f2;\">rotate(<\/span><span style=\"color: #ae81ff;\">360<\/span><span style=\"color: #f8f8f2;\">deg);<\/span>\n        <span style=\"color: #f92672;\">-<\/span><span style=\"color: #f8f8f2;\">webkit<\/span><span style=\"color: #f92672;\">-<\/span><span style=\"color: #f8f8f2;\">transform<\/span><span style=\"color: #f92672;\">:<\/span> <span style=\"color: #f8f8f2;\">rotate(<\/span><span style=\"color: #ae81ff;\">360<\/span><span style=\"color: #f8f8f2;\">deg);<\/span>\n        <span style=\"color: #f92672;\">-<\/span><span style=\"color: #f8f8f2;\">o<\/span><span style=\"color: #f92672;\">-<\/span><span style=\"color: #f8f8f2;\">transform<\/span><span style=\"color: #f92672;\">:<\/span> <span style=\"color: #f8f8f2;\">rotate(<\/span><span style=\"color: #ae81ff;\">360<\/span><span style=\"color: #f8f8f2;\">deg);<\/span>\n        <span style=\"color: #f8f8f2;\">transform<\/span><span style=\"color: #f92672;\">:<\/span> <span style=\"color: #f8f8f2;\">rotate(<\/span><span style=\"color: #ae81ff;\">360<\/span><span style=\"color: #f8f8f2;\">deg);<\/span>\n    <span style=\"color: #f8f8f2;\">}<\/span>\n<span style=\"color: #f8f8f2;\">}<\/span>\n<\/pre>\n<\/div>\n<p><a href=\"http:\/\/www.w3schools.com\/css\/css3_animations.asp\">CSS3 Animations<\/a> have some advantages over gifs, for this sort of thing, smaller files &amp; more colours for two.<\/p>\n<p>The css contains an animation @keyframes rule containing the animation code (the anticlockwise bit above) which is referred to in the images style. The bloc above could be shortened to:<\/p>\n<p><code>animation: anticlockwise 2s steps(11,end) infinite;<\/code><\/p>\n<p>I&#8217;ve played with css animation here before: <a href=\"http:\/\/johnjohnston.info\/106\/not-an-animated-gif\/\">Not an animated gif<\/a> and am now beginning to get a handle on it. Wondering if it could be useful for optical illusions. I&#8217;d also like to make a virtual Phenakistoscope that could load different files that need different speeds and steps. Adding some sort of mask\/viewer would be nice too&#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>@cogdog lovely stuffI didn&#39;t recognise\/recall word but got a phenakistiscope here. I think @jimgroom has one too pic.twitter.com\/40UQfNr6Ms &mdash; john johnston (@johnjohnston) June 25, 2016 The linked site: phenakistiscope de bal | Succursale | Ruppert &amp; Mulot is indeed lovely. It uses Flash. This got me thinking a wee bit about CSS animations. CSS phenakistiscope &hellip; <a href=\"https:\/\/johnjohnston.info\/106\/css-phenakistiscope\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;CSS phenakistiscope&#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":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[113,154],"tags":[103,104,232,233],"class_list":["post-2080","post","type-post","status-publish","format-standard","hentry","category-tutorial","category-web","tag-animation","tag-css","tag-css-animation","tag-phenakistiscope"],"better_featured_image":null,"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3RLlC-xy","_links":{"self":[{"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/posts\/2080","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=2080"}],"version-history":[{"count":12,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/posts\/2080\/revisions"}],"predecessor-version":[{"id":2096,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/posts\/2080\/revisions\/2096"}],"wp:attachment":[{"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/media?parent=2080"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/categories?post=2080"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/tags?post=2080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}