Let’s make a better printing animation together!

[bookcasey]

I made this little [Codepen demo](http://codepen.io/bookcasey/pen/Finbf) of a ‘printing’ page.

Basically, the animation is:

@keyframes print
0%
+translateY(-75%)
100%
+translateY(0%)

And called with: `animation: print 3s cubic-bezier(.75,.8,0,-0.5)`

I played around with `cubic-bezier()` to get the back-and-forth type movement a printer makes when going back over to plop down some more ink.

I’ve curious is anyone has any tips to make a more detailed / realistic, or at least read better like it’s coming out of a printer.

Thanks!

[DustinWoods]

[Here’s my go at it](http://codepen.io/joe/pen/zykhi “Printer Effect”). I think the key is emulating the jittery-ness of a printer. I used linear transition, but I made the keyframes have a stop-n-go feel.

[bookcasey]

Thanks, Dustin. Very cool.

[Author]

Posts