CSS phenakistiscope

no idea what a phenakistiscope is, how I got there, but fun loop animations (sadly needs Flash) https://t.co/9JYktvHY17 attn @johnjohnston

— Alan Levine (@cogdog) June 24, 2016

THe site Alan poined to phenakistiscope de bal | Succursale | Ruppert ∓ Mulot is pretty wonderful. No way to compete with artistic skills, but I wondered if you need flash. Turns out a bit of quick googling and experimenting did the trick. (I should have googled, CSS phenakistiscope which shows a lot of examples, I went for CSS animation so learnt a bit more).

 

File:Phenakistoscope 3g07690u.jpg - Wikimedia Commons public domain. I converted to a png and given a transparent background/border.

I've found a lot more and I think a slightly imporoved CSS setup : More...

CSS rotation:


     @-webkit-keyframes rotating /* Safari and Chrome */ {
      from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    @keyframes rotating {
      from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    .rotating {
      -webkit-animation: rotating steps(13,end)  linear infinite;
      -moz-animation: rotating 1s steps(13,end)  infinite;
      -ms-animation: rotating 1s steps(13,end)  infinite;
      -o-animation: rotating 1s steps(13,end)  infinite;
      animation: rotating 1s steps(13,end)  infinite;
    }
	
    .desert {
      -webkit-animation: rotating steps(11,end)  linear infinite;
      -moz-animation: rotating 1s steps(11,end)  infinite;
      -ms-animation: rotating 1s steps(11,end)  infinite;
      -o-animation: rotating 1s steps(11,end)  infinite;
      animation: rotating 1s steps(11,end)  infinite;
    }
	
   
 

File:Zoopraxiscope 16485u.jpg - Wikimedia Commons

More for Wikipedia all public domain: