Tweetbot for Mac Alpha CSS animation

Tweetbot for Mac Alpha is notable for a whole bunch of reasons I won’t get into here. Instead, I found something notable about the CSS the Tapbots team used on the page for their alpha release.

As the alpha’s page obviously won’t be around forever and there’s no telling what the release page will be like, I wanted to make a note here.

What’s notable? (If you’re reading this when Tweetbot for Mac Alpha’s page still looks like this:

Watch the egg. Wait for about nine seconds and it’ll shake.

What’s interesting to me is how, instead of using animation-delay, Tapbots defined an animation ten seconds long:

#appicon{
-webkit-animation:shake 10s linear infinite;
-moz-animation:shake 10s linear infinite;
animation:shake 10s linear infinite; }

They then delayed the shaking until 94% through that duration:

@keyframes shake{
94%{transform:translateX(0);}
94.5%{transform:translateX(2px);}
95%{transform:translateX(0);}
95.5%{transform:translateX(3px);}
96%{transform:translateX(0);}
96.5%{transform:translateX(5px);}
97%{transform:translateX(0);}
97.5%{transform:translateX(7px);}
98%{transform:translateX(0);}
98.5%{transform:translateX(5px);}
99%{transform:translateX(0);}
99.5%{transform:translateX(3px);}
100%{transform:translateX(0);}
}

Unprefixed

I’ve omitted animation vendor-specific-prefixes in the above example, but we’ll all be able to omit them soon. As Lea reported last week, the CSS Working Group have approved the unprefixing of CSS transforms, transitions and animations. IE10 will support animations unprefixed and soon Firefox will too.