I just now (very late, I’m sure) that CSS animation actually works really well, and is fairly compatible. They’re usually in part hardware accelerated or at least uses native things that run much faster than javascript doing requestAnimFrame. This is an especially good deal on phones, as they often take a massive hit trying to keep up with javascript animations *and* iOS and Android both handle the CSS animation tag fine.

I’m really new to this since I just noticed, but it’s not too complicated either. You specify (in css or style tag) a few things like a unique name, how long it should run, how many times to loop, etc. Then in a second @keyframes, you define which css properties you wish to have different values and when. For instance:

<style>
.hi {
animation: blink 800ms linear 0s infinite;
}
@keyframes blink {
0% {color: black; }
100% {color: white; }
}
</style>
…
<h1 class=hi>Hi there!</h1>

gives:

The 90s are back! You can add more % lines, change linear to ease-in and a few other for different speeds, change infinite to a number for a set number of loops, etc. A lot can be accomplished for not much load, but really there’s enough examples around. I’m testing doing an actual sprite by setting a pile of pictures on top of each other and switching opacity to choose which are visible and at the same time move it:

There’s some issues with this, like that they’re not technically speaking synced to each other, they’re placed absolute.. probably some other stuff I haven’t thought of. But it sure runs smoothly compared to banging it out in javascript. Perhaps I’ll write more later, gotta go play.