<div id="card">Click me to animate</div>
.animate {
  opacity: 1;
  animation: slider 1s linear;
}

@keyframes slider {
  0% {
    margin-left: 0;
    opacity: 1;
  }
  25% {
    margin-left: -200px;
    opacity: 0;
  }
  50% {
    margin-left: 200px;
    opacity: 0;
  }
  100% {
    margin-left: 0;
    opacity: 1;
  }
}

#card {
  background: #1f1f1f;
  margin: 10px;
  display: block;
  border: 1px dashed white;
  height: 200px;
  width: 200px;
  color: white;
  font-weight: bold;
  padding: 10px;
  text-align: center;
  cursor: pointer;
}
$("#card").on("click", () => {
  $("#card").addClass("animate");
  setTimeout(() => $("#card").removeClass("animate"), 1000);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js