div.random-container {
  display:flex;
  width:375px; height:600px; 
  background:no-repeat url(https://images.unsplash.com/photo-1531318781533-382f0cf2e5b8);
  background-size:cover;
  border:10px solid #d9aa78;
  margin:60px auto;
}

/* The animation markup */
@keyframes left-right {
  0% {
    left: -30px;
  }

  50% {
    left: 30px;
  }
  100% {
    left: -30px;
  }
}

/* The element to apply the animation to */
div.animation {
  position: relative;
  width: 115px;
  height: 143px;
  margin:auto; /* flex ITEM gets centered vert and horiz */
  background: no-repeat url(https://i.ibb.co/N3jC2Tm/swipe-icon.png);
  animation: left-right 1.8s ease-out infinite;
  /* above is shorthand for:
  
  animation-name: left-right;
  animation-duration: 1.8s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  
  */
}

@keyframes fade-out-anim {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

div.animation.fade-out {
  animation: fade-out-anim .5s ease 1;
  opacity:0; /* makes animation stay at zero */
}

$(".animation").click(function(){
$(this).addClass("fade-out");
});