<body>
  <div class="box-canvas">
    
    <div class="scene-wrapper">
      <div class="ant-wrapper one">
        <div class="leaf"></div>
        <div class="body-left"></div>
        <div class="body-middle"></div>
        <div class="body-right"></div>
      </div>

      <div class="ant-wrapper two">
        <div class="leaf"></div>
        <div class="body-left"></div>
        <div class="body-middle"></div>
        <div class="body-right"></div>
      </div>

      <div class="ant-wrapper three">
        <div class="leaf"></div>
        <div class="body-left"></div>
        <div class="body-middle"></div>
        <div class="body-right"></div>
      </div>
      </div>
  </div>
</body>
:root {
  --trunk-brown: #A07F65;
  --sky-blue: #9CE6FC;
  --ant-color: black;
  --leaf-color: #8ABD29;
}

body{
  background: linear-gradient(to bottom, var(--sky-blue), var(--sky-blue) 200px, var(--trunk-brown) 200px, var(--trunk-brown));
  padding: 0;
  margin: 0;
}

.box-canvas{
  position: relative;
  margin: 0;
  display: block;
  margin-top: 100px;
  margin-bottom: 8%;
  width: 100%;
  min-width: 300px;
  height:200px;
  background: var(--sky-blue);
}

.scene-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: antMarch 7s infinite linear;
}

/* Slow down the animation when the ants have to travel further */
@media only screen and (min-width: 600px) {
  .scene-wrapper {
    animation: antMarch 10s infinite linear;
  }
}

@media only screen and (min-width: 900px) {
  .scene-wrapper {
    animation: antMarch 13s infinite linear;
  }
}

@keyframes antMarch {
  0% {
    transform: translateX(300px);
  }
  
  100% {
    transform: translateX(-100%);
  }
}

/* Convenience class to wrap all ant elements */
.ant-wrapper{
  position: absolute;
  bottom: -5px;
  width: 100px;
  height: 100px;
}

.ant-wrapper.one {
  left: 100%;
  transform: translateX(-100%);
}

.ant-wrapper.two {
  left: calc(100% - 150px);
  transform: translateX(-100%);
}

.ant-wrapper.three {
  left: calc(100% - 300px);
  transform: translateX(-100%);
}

/* Wrapper for leaf and pincer */
.leaf {
  position: absolute;
  top: 20px;
  width: 80px;
  height: 50px;
}

/* Actual leaf */
.leaf::before {
  content: '';
  position: absolute;
  background: var(--leaf-color);
  width: 80px;
  height: 50px;
  clip-path: polygon(33% 9%, 99% 1%, 91% 30%, 100% 70%, 71% 98%, 0 98%, 0% 70%, 0% 30%);
  border-radius: 20%;
  transform: rotate(-20deg);
}

/* Change the leaf shape for each ant */
.three .leaf::before {
  clip-path: polygon(33% 9%, 52% 47%, 78% 51%, 89% 75%, 71% 98%, 0 98%, 12% 70%, 0% 30%);
}

.two .leaf::before {
  clip-path: polygon(36% 37%, 57% 26%, 73% 14%, 98% 40%, 62% 84%, 0 98%, 12% 70%, 40% 53%);
}

/* Pincer */
.leaf::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 12px;
  border: 2px solid var(--ant-color);
  width: 10px;
  height: 5px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(20deg);
}

/* Head */
.body-left {
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--ant-color);
  border-radius: 50%;
  bottom: 17px;
  right: 60px;
}

/* Feeler left */
.body-left::before {
  content: '';
  position: absolute;
  top: -8px;
  height: 10px;
  width: 5px;
  border: 1px solid var(--ant-color);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 40%;
}

/* Feeler left */
.body-left::after {
  content: '';
  position: absolute;
  left: 10px;
  top: -8px;
  height: 10px;
  width: 5px;
  border: 1px solid var(--ant-color);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 40%;
}

.body-middle {
  position: absolute;
  bottom: 10px;
  right: 40px;
  background: var(--ant-color);
  border-radius: 50%;
  width: 25px;
  height: 20px;
}

/* Middle leg */
.body-middle::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 10px;
  height: 15px;
  width: 15px;
  border: 2px solid var(--ant-color);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-top-color: transparent;
  border-radius: 50%;
  animation: middleLegMove 0.25s infinite;
}

@keyframes middleLegMove {
  0% {
    transform: translateY(-5px);
  }
  
  50% {
    transform: translateY(0)
  }
  
  100% {
    transform: translateY(-5px);
  }
}

/* Front leg */
.body-middle::before {
  content: '';
  position: absolute;
  bottom: -8px;
  left: -15px;
  height: 15px;
  width: 15px;
  border: 2px solid var(--ant-color);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-top-color: transparent;
  border-radius: 40%;
  transform: rotate(20deg);
  animation: frontLegMove 0.25s infinite;
}

@keyframes frontLegMove {
  0% {
    transform: rotate(20deg);
  }
  
  50% {
    transform: rotate(20deg) translateY(-5px);
  }
  
  100% {
    transform: rotate(20deg);
  }
}

.body-right {
  position: absolute;
  bottom: 10px;
  right: 15px;
  width: 30px;
  height: 20px;
  background: var(--ant-color);
  border-radius: 50%;
  transform: rotate(-10deg);
}

/* Back leg */
.body-right::before {
  content: '';
  position: absolute;
  top: 10px;
  right: -5px;
  height: 20px;
  width: 25px;
  border: 2px solid var(--ant-color);
  border-left: none;
  border-bottom: none;
  transform: skew(0deg, -40deg) rotate(25deg);
  animation: backLegMove 0.25s infinite;
}

@keyframes backLegMove {
  0% {
    transform: skew(0deg, -40deg) rotate(25deg);
  }
  
  50% {
    transform: skew(0deg, -40deg) rotate(25deg) translateY(-3px);
  }
  
  100% {
    transform: skew(0deg, -40deg) rotate(25deg);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.