<div class="wrapper">
  <div class="inner">
    <div class="row">
      <span class="item item01">
        <span class="tire"></span>
      </span>
      <span class="item item02">
        <span class="tire"></span>
      </span>
      <span class="item item03">
        <span class="tire"></span>
      </span>
      <span class="item item04">
        <span class="tire"></span>
      </span>
      <span class="cloud cloud01"></span>
      <span class="cloud cloud02"></span>
      <span class="cloud cloud03"></span>
      <span class="cloud cloud04"></span>
    </div>
  </div>
</div>

body{
  background: #f1f1f1;
}

@keyframes run01 {
  0%{
    left: -50%;
  }
  100%{
    left: 150%;
  }
}

@keyframes run02 {
  0%{
    left: -80%;
  }
  100%{
    left: 200%;
  }
}

@keyframes run03 {
  0%{
    left: -40%;
  }
  100%{
    left: 130%;
  }
}

@keyframes run04 {
  0%{
    left: -100%;
  }
  100%{
    left: 160%;
  }
}

@keyframes float01 {
  0%{
    transform: translateY(0%);
  }
  50%{
    transform: translateY(50%);
  }
  100%{
    transform: translateY(0%);
  }
}

@keyframes float02 {
  0%{
    transform: translateY(0%);
  }
  50%{
    transform: translateY(-50%);
  }
  100%{
    transform: translateY(0%);
  }
}

.wrapper{
  width: 100%;
  
  .inner{
    overflow: hidden;
    max-width: 500px;
    width: 100%;
    margin: 20px auto 0;
    background: #1cb0d9;
    
    .row{
      position: relative;
      width: 100%;
      min-height: 110px;
      box-sizing: border-box;
      border-bottom: 10px solid #07871a;
      
      .item{
        position: absolute;
        left: -80px;
        bottom: 0;
        display: block;
        width: 80px;
        height: 20px;
        border-radius: 18px 20px 0 0;
        margin-bottom: 3px;
        transfrom: translateX(0);
        
        &:before{
          content: '';
          display: block;
          position: absolute;
          top: -95%;
          left: 12px;
          width: 48px;
          height: 20px;
          border-radius: 15px 20px 0 0;
        }
        
        &:after{
          content: '//';
          display: block;
          position: absolute;
          top: -60%;
          right: 25px;
          width: 18px;
          height: 12px;
          border-radius: 2px 10px 0 0;
          background: #ccc;
          font-size: 10px;
          color: #888;
          text-align: center;
        }
        
        .tire{
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          width: 60px;
          height: 23px;
          margin: 0 auto;
          &:before{
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 10px;
            height: 10px;
            background: #888;
            border: 3px solid #333;
            border-radius: 50%;
          }
          &:after{
            content: '';
            position: absolute;
            right: 0;
            bottom: 0;
            width: 10px;
            height: 10px;
            background: #888;
            border: 3px solid #333;
            border-radius: 50%;
          }
        }

        &.item01{
          background: #a865a7;
          animation: run01 7s ease-in infinite;
          
          &:before{
             background: #a865a7;
          }
        }

        &.item02{
          background: #ff6600;
          animation: run02 8s ease-in-out infinite 1s;
          
          &:before{
             background: #ff6600;
          }
        }

        &.item03{
          background: #1A76C4;
          animation: run03 5s ease-in infinite;
          
          &:before{
             background: #1A76C4;
          }
        }

        &.item04{
          background: #ff0000;
          animation: run04 6s infinite;
          
          &:before{
             background: #ff0000;
          }
        }
      }
    }
  }
}

.cloud{
  position: absolute;
  top: 15px;
  display: block;
  width: 40px;
  height: 12px;
  background: #f1f1f1;
  border-radius: 15px;
  
  &:before{
    content: '';
    position: absolute;
    top: -8px;
    right: 13%;
    display: block;
    width: 20px;
    height: 20px;
    background: #f1f1f1;
    border-radius: 50%;
  }
  
  &:after{
    content: '';
    position: absolute;
    top: -7px;
    left: 15%;
    display: block;
    width: 15px;
    height: 15px;
    background: #f1f1f1;
    border-radius: 50%;
  }
  
  &.cloud01{
    left: -2%;
    animation: float01 5s infinite;
  }
  
  &.cloud02{
    right: 10%;
    animation: float02 6s infinite;
  }
  
  &.cloud03{
    top: 20px;
    left: 30%;
    width: 50px;
    height: 12px;
    animation: float01 4s infinite;
    
    &:before{
      right: 18%;
      width: 20px;
      height: 20px;
    }
    
    &:after{
      top: -10px;
      width: 18px;
      height: 18px;
    }
  }
  
  &.cloud04{
    top: 20px;
    right: 20%;
    width: 50px;
    height: 12px;
    animation: float02 6s infinite;
    
    &:before{
      top: -12px;
      right: 18%;
      width: 23px;
      height: 23px;
    }
  }
}