@mixin commodityexchange {
    polygon {
        animation-duration: 1s;
        animation-iteration-count: 1;
        animation-delay: 2s;
        animation-timing-function: cubic-bezier(0.84, 1.84, 0.59, 0.72);
        animation-fill-mode: forwards;
      }
  
      polygon:nth-child(2) {
        animation-name: commodityexchangeAnimation1;
        transform: translate(-1450px, 8520px);
      }
  
      polygon:nth-child(3) {
        animation-name: commodityexchangeAnimation2;
        transform: translate(1240px, -7970px);
      }
  
      polygon:nth-child(4) {
        animation-name: commodityexchangeAnimation3;
        transform: translate(1240px, -7780px);
      }
}

@mixin commodityexchangeAnimations {
    @keyframes commodityexchangeAnimation1 {
        0% {
          transform: translate(-1450px, 8520px);
        }
        100% {
          transform: translate(0, 0);
        }
      }
      
      @keyframes commodityexchangeAnimation2 {
        0% {
          transform: translate(1240px, -7780px);
        }
        100% {
          transform: translate(0, 0);
        }
      }
      
      @keyframes commodityexchangeAnimation3 {
        0% {
          transform: translate(-5720px, 0px);
        }
        100% {
          transform: translate(0, 0);
        }
      }
  }