Smoke Animation | Learning Axis

HTML

CSS

body {
      background-color: #08e7ef;
    }
    #smoke-box {
      position: absolute;
      width: 1px;
      height: 160px;
      bottom: 50%;
      left: 50%;
      z-index: 3;
    }
    #smoke-box span {
      display: block;
      position: absolute;
      left: 50%;
      bottom: -35px;
      margin-left: -20px;
      width: 0;
      height: 0;
      border: 35px solid #4b4b4b;
      border-radius: 35px;
      opacity: 0;
      transform: scale(0.2);
    }
    @keyframes smoke-boxL {
      0% {
        transform: scale(0.2) translate(0, 0)
      }
      10% {
        opacity: 1;
        transform: scale(0.2) translate(0, -5px)
      }
      100% {
        opacity: 0;
        transform: scale(1) translate(-20px, -130px)
      }
    }
    @keyframes smoke-boxR {
      0% {
        transform: scale(0.2) translate(0, 0)
      }
      10% {
        opacity: 1;
        transform: scale(0.2) translate(0, -5px)
      }
      100% {
        opacity: 0;
        transform: scale(1) translate(20px, -130px)
      }
    }
    #smoke-box .s0 {
      animation: smoke-boxL 10s 0s infinite
    }
    #smoke-box .s1 {
      animation: smoke-boxR 10s 1s infinite
    }
    #smoke-box .s2 {
      animation: smoke-boxL 10s 2s infinite
    }
    #smoke-box .s3 {
      animation: smoke-boxR 10s 3s infinite
    }
    #smoke-box .s4 {
      animation: smoke-boxL 10s 4s infinite
    }
    #smoke-box .s5 {
      animation: smoke-boxR 10s 5s infinite
    }
    #smoke-box .s6 {
      animation: smoke-boxL 10s 6s infinite
    }
    #smoke-box .s7 {
      animation: smoke-boxR 10s 7s infinite
    }
    #smoke-box .s8 {
      animation: smoke-boxL 10s 8s infinite
    }
    #smoke-box .s9 {
      animation: smoke-boxR 10s 9s infinite
    }