@keyframes wololo {
  0%  {transform: rotateZ(45deg);}
  20% {transform: rotateZ(85deg);}
  40% {transform: rotateZ(90deg) translateY(50px);}
  60% {transform: rotateZ(85deg) translateY(20px);}
  100%{transform: rotateZ(45deg);}
}

@keyframes boing {
  50% {transform: translateX(20px);}
  100%{transform: translateX(0);}
}

.rubber_active {
  animation: boing 1s;
}

.active {
  animation: wololo 3s;
}

.container {
  background: #ddd;
  height:100vh;
  .pen {
    width: 400px;
    position: relative;
    top:50%;
    left:0;
    right:0;
    bottom:0;
    margin: auto;
    transform: rotateZ(45deg);
    cursor: pointer; 
    .pen_rubber {
      display: inline-block;
      width: 40px;
      height: 25px;
      background: #e74c3c;
      position: relative;
      border-radius: 4px 0 0 0;
      &:after {
        display: inline-block;
        width:40px;
        height:25px;
        content:"";
        background: #c0392b;
        position: absolute;
        top:25px;
        border-radius: 0 0 0 4px;
      }
    }
    .pen_metalthingy {
      display: inline-block;
      height: 30px;
      width: 25px;
      background: #ccc;
      position: absolute;
      top:-5px;
      &:after {
        height:30px;
        width:25px;
        content:"";
        display: inline-block;
        position: absolute;
        top: 30px;
        background: #bbb;
      }
    }
    .pen_wood {
      width:200px;
      height: 30px;
      display:inline-block;
      position: absolute;
      top:-5px;
      left: 65px;
      background:#f39c12;
      &:after {
        content:"";
        width: 200px;
        height: 30px;
        display: inline-block;
        background: #e67e22;
        position: absolute;
        top:30px;
      }
    }
    .pen_tip {
      border-left:40px solid rgba(182, 155, 76,.4);
      border-top: 30px solid transparent;
      display: inline-block;
      position: absolute;
      top:-5px;
      left: 265px;
      &:after {
        border-left:40px solid rgba(182, 155, 76,.6);
        border-bottom: 30px solid transparent;
        display: inline-block;
        position: absolute;
        top:0px;
        left: -40px;
        content:"";
      }
    }
    .pen_tipstip {
      position: absolute;
      left:298px;
      top:20px;
      display: inline-block;
      border-left: 10px solid #999;
      border-top: 5px  solid transparent;
      &:after {
        position: absolute;
        display:inline-block;
        content:"";
        left:-10px;
        border-left: 10px solid #888;
        border-bottom: 5px solid transparent;
      }
    }
  }
}