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](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!

    # December 23, 2012 at 3:18 pm

    [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.

    # 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.

*May or may not contain any actual "CSS" or "Tricks".