CSS animation – Card Slide-In

Using CSS @keyframes you can animate cards from left to right in the following way. This works on almost all major modern browsers.

Demo

<style>
.card {
  height: 100px;
  width: 250px;
  background: white;
  border-radius: 8px;
  border: 1px solid #999;
  box-shadow: 5px 5px 5px #999;
  animation: slidein 5s;
  animation-fill-mode: forwards;
  margin-right: 16px;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
}

@keyframes slidein {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}
</style>
<div style="display:flex;">
  <div class="card">
  </div>
  <div class="card">
  </div>
  <div class="card">
  </div>
</div>