CSS Printer Animation

---

To learn how to create the CSS Printer Animation follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div id="printer-animation" class="printer-animation">
  <div class="printer">
  <input id="button" type="checkbox"> 
    <label class="button" for="button"></label>
    <div class="top"></div>
    <div class="middle"></div>
    <div class="trace"></div>
    <div class="paper">
    </div>
  </div>
  </div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background-color: #ffe5cc;
}

input#button {
  display: none;
}

.printer-animation, .printer {
  position: relative;
  top:-35px;
}

Style the printer:

.top {
  position: absolute;
  background-color: #282c30;
  width: 160px;
  height:70px;
  border-radius: 20px 20px 0 0;
  border:5px solid black;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
  box-shadow: inset 20px 0 #1e2124;
  z-index:-1;
}

.middle {
  position: absolute;
  background-color: #4a4f55;
  border: 5px solid black;
  width: 250px;
  height:100px;
  border-radius: 20px;
  top:30px;
  left:-130px;
  box-shadow: inset 20px 0 #373b3d;
  z-index:5;
}

.trace, .trace:before {
  position: absolute;
  background-color: #282c30;
}

.trace {
  border:5px solid black;
  width: 160px;
  height: 80px;
  border-radius: 10px;
  left:-85px;
  top:110px;
  box-shadow: inset 0 35px #1e2124;
  z-index:2;
}

.trace:before {
  content:"";
  width: 60px;
  height: 20px;
  border-radius: 0 0 10px 10px;
  top:80px;
  left:45px;
  border-bottom: 5px solid black;
  border-right: 5px solid black;
  border-left: 5px solid black;
}

.trace:after {
  position: absolute;
  content:"";
  width: 5px;
  height: 50px;
  background-color: black;
  left: 20px;
  top:15px;
  box-shadow: 60px 0 black, 115px 0 black;
}

.paper {
  position: absolute;
  border: 5px solid black;
  background-color: white;
  width:120px;
  height: 140px;
  top:-70px;
  left: -65px;
  z-index:3;
}

.button {
  position: absolute;
  z-index:30;
  border-radius: 50%;
  border: 5px solid black;
  background-color: #fd6e49;
  width:15px;
  height: 15px;
  left: 90px;
  cursor: pointer;
  top:45px;
  animation: pulse 1.5s infinite;
}

.button:active {
  background-color: #52dc97;
}

.button:hover {
  animation: none;
}

.paper:before {
  content:"Don't forget to smile :)";
  position: absolute;
  font-family: arial;
  text-align: center;
  top: 50px;
  transform: scaleY(-1);
  opacity:0;
}

Animate the button and the paper:

input#button:checked ~ .paper {
  animation: print 2.2s linear forwards;
}

input#button:checked ~ .paper:before {
  animation: display 2.2s linear forwards;
}

@keyframes print {
  0% {transform: translateY(0);z-index:3;}
  50% {transform: translateY(200px);z-index:3;}
  79% {transform: translateY(200px);z-index:3;}
  90% {transform: translateY(200px) rotateX(-90deg);z-index:3;}
  95% {transform: translateY(50px) scale(2);z-index:50;}
  100% {transform: translateY(50px) scale(2);z-index:50;}
}

@keyframes display {
  0% {opacity:0; transform: scaleY(-1);}
  28% {opacity:0; transform: scaleY(-1);}
  40% {opacity:1; transform: scaleY(-1);}
  80% {opacity:1; transform: scaleY(-1);}
  95% {opacity:1; transform: scaleY(1);}
  100% {opacity:1; transform: scaleY(1);}
}

@keyframes pulse {
  0% {
    transform:scale(.9);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 3px rgba(253, 110, 73,.3);
  }
    100% {
    transform: scale(.9);
    box-shadow: 0 0 0 0 rgba(253, 110, 73,.3);
  }
}

Step3. (optional)

Add jQuery

To repeat the animation on double click add jQuery:

To read how to add the jQuery code to HTML click here.

$(document).ready(function(){
  $('#printer-animation').mouseleave(function(){
    $(this).removeClass('clicked');
  }).dblclick(function(){
    $(this).addClass('clicked').html($(this).html());
  });
});

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

Roll the dice!

JS Simple Signature Pad

HTML & CSS Birthday Card