SASS - floating image animation mixin

Question

@mixin floating-base {
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  margin-left: 30px;
  margin-top: 5px;
}

@mixin floating-animation {
  animation-name: dot-floating;
  animation-duration: 1.5s;
  @include floating-base;
  @keyframes dot-floating {
      0% { transform: translate(0,  0px); }
      50%  { transform: translate(0, 15px); }
      100%   { transform: translate(0, -0px); }    
  }
}

@mixin floating-animation-2 {
  animation-name: dot-floating-2;
  animation-duration: 1.8s;
  @include floating-base;
  @keyframes dot-floating-2 {
      0% { transform: translate(0,  0px); }
      50%  { transform: translate(0, 20px); }
      100%   { transform: translate(0, -0px); }    
  }
}

@mixin floating-animation-3 {
  animation-name: dot-floating-3;
  animation-duration: 2.4s;
  @include floating-base;
  @keyframes dot-floating-3 {
      0% { transform: translate(0,  0px); }
      50%  { transform: translate(0, 20px); }
      100%   { transform: translate(0, -0px); }    
  }
}

to use

.v--dot { 
  img {
      position: absolute;
      width: 75px !important;
      height: auto; 
      @include floating-animation;
      &.map1-menu {
          &-1 {
              top: 13%;
              left: -3%; 
              @media (min-width: 768px) { 
                  top: 16%;
                  left: 3%; 
              }
              @media (min-width: 1440px) {
                  top: 17%; 
                  left: 4%;
              }
          }
          &-2 {
              @include floating-animation-2;
              top: 4.5%;
              left: 67.5%;
              @media (min-width: 768px) {  
                  top: 10.6%;
                  left: 73.5%;
              }
              @media (min-width: 1440px) {
                  top: 11.5%;
                  left: 74.5%;
              }
          }
          &-3 {
              top: 23.6%;
              left: 17.5%;
              @include floating-animation-3;
              @media (min-width: 768px) {  
                  top: 23.5%;
                  left: 23.5%;
              }
              @media (min-width: 1440px) {
                  top: 29.3%;
                  left: 24.5%;
              }
          }
          &-4 {
              @include floating-animation;
              top: 18.5%;
              left: 53.5%;
              @media (min-width: 768px) {  
                  top: 21.5%;
                  left: 62.5%;
              }
              @media (min-width: 1440px) {
                  top: 34.5%;
                  left: 51.5%;
              }
          }
          &-5 {
              top: 38.5%;
              left: 75.5%;
              @include floating-animation-2;
              @media (min-width: 768px) {  
                  top: 31.5%;
                  left: 82.5%; 
              }
              @media (min-width: 1440px) {
                  top: 42.5%;
                  left: 83.5%;
              }
          }
          &-6 {
              @include floating-animation-3;
              top: 43%;
              left: 21.5%;
              @media (min-width: 768px) {  
                  top: 34.5%;
                  left: 28.5%;
              }
              @media (min-width: 1440px) {
                  top: 47%;
                  left: 29.5%;
              }
          } 
          
      }  
  }  
}