Receipt Printing Animation: CSS Text Animation

Receipt Printing Animation

A receipt feeds out of a printer slot in short jerky steps, torn edge first, like a thermal printer. The paper is a transformed block under an overflow clip, so the text never reflows.

Also known as: receipt printer css, printing paper animation, order receipt animation.

ORDER #1042

Oat latte4.50

Bagel3.25

TOTAL7.75

Color Font size 40px Dark background

HTML

<div class="txt-receipt-printing-animation">
  <span class="txt-receipt-printing-animation-slot" aria-hidden="true"></span>
  <div class="txt-receipt-printing-animation-window">
    <div class="txt-receipt-printing-animation-paper">
      <p class="txt-receipt-printing-animation-head">ORDER #1042</p>
      <p>Oat latte<span>4.50</span></p>
      <p>Bagel<span>3.25</span></p>
      <p class="txt-receipt-printing-animation-total">TOTAL<span>7.75</span></p>
    </div>
  </div>
</div>

CSS

.txt-receipt-printing-animation {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: calc(var(--txt-size, 32px) * 0.46);
  font-weight: 600;}
.txt-receipt-printing-animation-slot {
  position: relative;
  z-index: 1;
  width: 15em;
  height: 0.7em;
  border-radius: 0.35em;
  background: color-mix(in srgb, var(--c) 55%, #111827);
  box-shadow: inset 0 -0.2em 0 rgb(0 0 0 / 0.35);
}
.txt-receipt-printing-animation-window {
  margin-top: -0.35em;
  padding: 0 0.6em 0.9em;
  overflow: hidden;
}
.txt-receipt-printing-animation-paper {
  position: relative;
  width: 12em;
  padding: 0.9em 1em 0.6em;
  color: #1f2937;
  background: #fff;
  box-shadow: 0 0.2em 0.5em rgb(0 0 0 / 0.12);
  transform: translateY(-105%);
  /* the feed moves in ten jerky steps */
  animation: txt-receipt-printing-animation-feed 2.4s steps(10) 0.3s forwards;
}
/* torn zigzag bottom edge */
.txt-receipt-printing-animation-paper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0.4em;
  background: conic-gradient(from -45deg at 50% 100%, #fff 90deg, transparent 0) 0 0 / 0.8em 100% repeat-x;
}
.txt-receipt-printing-animation p {
  display: flex;
  justify-content: space-between;
  margin: 0;
  line-height: 1.6;
}
.txt-receipt-printing-animation-head {
  justify-content: center;
  margin-bottom: 0.3em;
  letter-spacing: 0.1em;
  color: var(--c);
}
.txt-receipt-printing-animation-total {
  margin-top: 0.3em;
  padding-top: 0.3em;
  font-weight: 800;
  border-top: 1px dashed rgb(31 41 55 / 0.4);
}
@keyframes txt-receipt-printing-animation-feed {
  99.9%, to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .txt-receipt-printing-animation, .txt-receipt-printing-animation *, .txt-receipt-printing-animation::before, .txt-receipt-printing-animation::after, .txt-receipt-printing-animation *::before, .txt-receipt-printing-animation *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --txt-color on the element or a parent. Currently previewing #3b82f6.
Font size: set --txt-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 40px.
Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Receipt Printing Animation

HTML

CSS

Customizing this snippet

Similar text animations