.wrapper {
    margin: 100px auto;
    width: 600px;
    overflow: hidden;
    text-align: center;
  }
  
  .icon4,
  .icon5,
  .icon6 {
    width: 500px;
    height: 500px;
    display: inline;
    margin: 5px;
  }
  
  .icon5 {
    transform: translateY(-15px);
  }
  
  @keyframes fadeInLeft {
    0% {
      opacity: 0;
      transform: translateX(-20px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  .fadeInLeft {
    animation-name: fadeInLeft;
  }
  
  .animated {
    animation-duration: 1s;
    animation-fill-mode: both;
  }
  
  
  /************* ICON4 *****************/
  
  .line1 {
    opacity: 0;
    animation: fadeInLeft both 1s 0.4s, coding1 ease 6s 4s infinite;
  }
  
  .line2 {
    opacity: 0;
    animation: fadeInLeft both 1s 0.6s, coding2 ease 6s 4s infinite;
  }
  
  .line3 {
    opacity: 0;
    animation: fadeInLeft both 1s 0.8s, coding3 ease 6s 4s infinite;
  }
  
  .line4 {
    opacity: 0;
    animation: fadeInLeft both 1s 1.0s, coding4 ease 6s 4s infinite;
  }
  
  .line5 {
    opacity: 0;
    animation: fadeInLeft both 1s 1.2s, coding5 ease 6s 4s infinite;
  }
  
  .line6 {
    opacity: 0;
    animation: fadeInLeft both 1s 1.4s, coding6 ease 6s 4s infinite;
  }
  
  .line7 {
    opacity: 0;
    animation: fadeInLeft both 1s 1.6s, coding6 ease 6s 4s infinite;
  }
  
  @keyframes coding1 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    14% {
      transform: translate(0, -10px);
      opacity: 0;
    }
    15% {
      transform: translate(0, 45px);
    }
    30% {
      transform: translate(0, 40px);
      opacity: 1;
    }
    45% {
      transform: translate(0, 30px);
    }
    60% {
      transform: translate(0, 20px);
    }
    75% {
      transform: translate(0, 10px);
    }
    90% {
      transform: translate(0, 5px);
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  
  @keyframes coding2 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    15% {
      transform: translate(0, -5px);
      opacity: 1;
    }
    29% {
      transform: translate(0, -10px);
      opacity: 0;
    }
    30% {
      transform: translate(0, 40px);
    }
    45% {
      transform: translate(0, 30px);
      opacity: 1;
    }
    60% {
      transform: translate(0, 20px);
    }
    75% {
      transform: translate(0, 10px);
    }
    90% {
      transform: translate(0, 5px);
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  
  @keyframes coding3 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    15% {
      transform: translate(0, -5px);
    }
    30% {
      transform: translate(0, -10px);
      opacity: 1;
    }
    44% {
      transform: translate(0, -20px);
      opacity: 0;
    }
    45% {
      transform: translate(0, 30px);
    }
    60% {
      transform: translate(0, 20px);
      opacity: 1;
    }
    75% {
      transform: translate(0, 10px);
    }
    90% {
      transform: translate(0, 5px);
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  
  @keyframes coding4 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    15% {
      transform: translate(0, -5px);
    }
    30% {
      transform: translate(0, -10px);
    }
    45% {
      transform: translate(0, -20px);
      opacity: 1;
    }
    59% {
      transform: translate(0, -30px);
      opacity: 0;
    }
    60% {
      transform: translate(0, 20px);
    }
    75% {
      transform: translate(0, 10px);
      opacity: 1;
    }
    90% {
      transform: translate(0, 5px);
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  
  @keyframes coding5 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    15% {
      transform: translate(0, -5px);
    }
    30% {
      transform: translate(0, -10px);
    }
    45% {
      transform: translate(0, -20px);
    }
    60% {
      transform: translate(0, -30px);
      opacity: 1;
    }
    74% {
      transform: translate(0, -40px);
      opacity: 0;
    }
    75% {
      transform: translate(0, 10px);
    }
    90% {
      transform: translate(0, 5px);
      opacity: 1;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  
  @keyframes coding6 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    15% {
      transform: translate(0, -5px);
    }
    30% {
      transform: translate(0, -10px);
    }
    45% {
      transform: translate(0, -20px);
    }
    60% {
      transform: translate(0, -30px);
    }
    75% {
      transform: translate(0, -40px);
      opacity: 1;
    }
    89% {
      transform: translate(0, -50px);
      opacity: 0;
    }
    90% {
      transform: translate(0, 10px);
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  
  
  /************* ICON5 *****************/
  
  .file1 {
    opacity: 0;
    animation: fadeInLeft both 1s 1s, file ease 6s 2.6s infinite;
  }
  
  .file2 {
    opacity: 0;
    animation: fadeInLeft both 1s 1.2s, file2 ease 6s 2.6s infinite;
  }
  
  .file3 {
    opacity: 0;
    animation: fadeInLeft both 1s 1.4s, file3 ease 6s 2.6s infinite;
  }
  
  @keyframes file {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    70% {
      transform: translate(0, -25px);
      opacity: 0;
    }
    71% {
      transform: translate(0, 30px);
      opacity: 0;
    }
    72% {
      transform: translate(0, 30px);
      opacity: 1;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  
  @keyframes file2 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    50% {
      transform: translate(0, -20px);
      opacity: 0;
    }
    51% {
      transform: translate(0, 40px);
      opacity: 0;
    }
    52% {
      transform: translate(0, 40px);
      opacity: 1;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  
  @keyframes file3 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    20% {
      transform: translate(0, -15px);
      opacity: 0;
    }
    21% {
      transform: translate(0, 70px);
      opacity: 0;
    }
    22% {
      transform: translate(0, 70px);
      opacity: 1;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  
  
  /************* ICON6 *****************/
  
  .cloud {
    opacity: 0;
    animation: cloud ease 6s 1s infinite;
  }
  
  .truck {
    animation: truck ease 6s 1s infinite;
  }
  
  .wheel1,
  .wheel2,
  .wheel3 {
    animation: wheel linear 3s 1s infinite;
    transform-origin: 50% 50%;
  }
  
  @keyframes truck {
    0% {
      transform: translate(0, 0);
    }
    13% {
      transform: translate(0, -1px);
    }
    26% {
      transform: translate(0, 1px);
    }
    39% {
      transform: translate(0, -1px);
    }
    52% {
      transform: translate(0, 1px);
    }
    65% {
      transform: translate(0, -1px);
    }
    78% {
      transform: translate(0, 1px);
    }
    91% {
      transform: translate(0, -1px);
    }
    100% {
      transform: translate(0, 0);
    }
  }
  
  @keyframes cloud {
    0% {
      transform: translate(5px, 0);
      opacity: 0;
    }
    50% {
      transform: translate(5px, 0);
      opacity: 0;
    }
    51% {
      transform: translate(0, 0);
      opacity: 1;
    }
    52% {
      transform: translate(0, 0);
      opacity: 1;
    }
    100% {
      transform: translate(-5px, 0);
      opacity: 0;
    }
  }
  
  @keyframes wheel {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }