Tag: animation

CSS phenakistiscope

The linked site: phenakistiscope de bal | Succursale | Ruppert & Mulot is indeed lovely. It uses Flash. This got me thinking a wee bit about CSS animations.

CSS phenakistiscope was a first test, followed by More phenakistoscope.

Here is an example (click on the image to see it without animation):

bird-cat-12

Image from: NCSSM | Flickr – Photo Sharing! used under a Creative Commons — Attribution-NonCommercial-ShareAlike 2.0 Generic — CC BY-NC-SA 2.0

There are more examples on the pages linked above, but I’ve added the following css to this blog (using the jetpack css module).

.catchase {
    animation-duration: 2s;
    animation-timing-function: steps(13,end);
    animation-name: anticlockwise;
    animation-iteration-count: infinite;
}

@keyframes anticlockwise {
    to {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    
    from {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

CSS3 Animations have some advantages over gifs, for this sort of thing, smaller files & more colours for two.

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:

animation: anticlockwise 2s steps(11,end) infinite;

I’ve played with css animation here before: Not an animated gif and am now beginning to get a handle on it. Wondering if it could be useful for optical illusions. I’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…

Go Jim, Stop Jim

Riffing off this: Educator, Learner | Animate (SOME) of the GIFs! – Educator, Learner
And recalling this: Not an animated gif

Click Jim to toggle the animation.

I’ve piut this in Mozilla Thimble if you want to remix or look at code: toggle sprite.

QuickTime for a Smoke

perchance480
This is not a gif assignment.

qt_tools is a set of commandline tools for Mac that manipulate quicktime movies. One of the tools is qt_proofsheet:

QT_PROOFSHEET will take a QuickTime movie and render it out as individual frames in a grid. By default, it takes about 100 frames of your movie and fits it onto an 8.5 x 11 document, with timecode imprints.

from: qt_tools
By using different parameters you can make a strip of stills from a quicktime movie the one I am using here is 576 x 8208 pixels.
This is then animated with css. The qt-proofsheet adds the time stamp, you can minimise them but I found them useful is creating the animation.

For those interested, probably only a few, here is the code

The stills were grabbed from ‘Perchance to Dream’ an episode of the twilight zone.

I am afraid I am a bit sort of time so this post is a bit lacking in information, but this technique is an interesting take on the animated gif. The quality is fairly good and the file is 654kb.

Here is a more standard use of proofsheet:
perchancesheet
Right-Click and open in new window to see at full size, this could be useful for analysing film.