Number Scramble / Backwards Responsive Text Animations

I happened to have been finishing up some projects and naturally couldnt resist playing a bit I wanted to have a flat css based logo for a site landing page but something to dress it up a tad. A fly in animtion was my first thought but I didnt feel that fit at all and thats when I stumbled into this solution which so far I'm liking. a quick spin of the text and then back to quiet and flat.

How it Works

The effect here is achieved by expanding reduced width (1 character wide) text with keyframes to the maximum or full-sized desired width at load time causing a cool number letter scramble a la 'the Matrix' use at page load or whatever event pleases you.


the code

Clearly some tweaking of the timing is in order, lest it appear the site or network is slow I am trying now at about 6 seconds probably too slow still but i want the animation to have an even duration relative to the hover in effect in this example:

example 2

**note works in progress, may contain some errors or redundant properties.

by ray anthony Blog website:

1,900 0 1