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.


Card 1

Card 2

.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%);
<div style="display:flex;">
  <div class="card">
  <div class="card">
  <div class="card">