Treehouse: Grow your CSS skills. Land your dream job.

Let’s make a better printing animation together!

  • # December 23, 2012 at 12:08 am

    I made this little [Codepen demo]( of a ‘printing’ page.

    Basically, the animation is:

    @keyframes print

    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.


    # December 23, 2012 at 3:18 pm

    [Here’s my go at it]( “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.

    # December 23, 2012 at 10:29 pm

    Thanks, Dustin. Very cool.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.