Cacher is the code snippet organizer for pro developers

//----------------------------------------------
.icon-duck {
  position: relative;
  animation-name: duckMove;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);

  @media (max-width: $screen-sm-max) {
    width: 52px;
  }
}

//----------------------------------------------
@keyframes duckMove {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-100px, 0, 0);
  }
}

//----------------------------------------------
.icon-duck-container {
  animation-name: duckShow;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

//----------------------------------------------
@keyframes duckShow {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  65% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}






<div class="icon-duck-container">
                            <img src="img/icon/duck.png" alt="" class="media-object icon-duck"/>
                        </div>