$size: 200px;

body {
  background: #111;
  color: #ccc;
}

.card {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: (-$size/2);
  margin-top: (-3*$size/4);
  width: $size;
  height: 1.5*$size;
  border: $size/20 solid #ccc;
  border-radius: 3*$size/20;
  background: #111;
  outline: #111 solid $size/10;
  transform: rotateZ(-15deg)
    rotateY(45deg) 
    rotateX(60deg);
  opacity: 0;
}

h1 {
  display: inline-block;
  width: 1.5*$size;
  margin-top: 25%;
  margin-left: -25%;
  transform: rotate(90deg);
  font-size: 3.5*$size/10;
  text-align: center;
  line-height: $size;
  font-family: 'Calligraffitti', cursive;
}

@for $i from 0 to 4 {
  .card:nth-of-type(#{$i + 1}) {
    margin-top: (-3*$size/4) - $i*$size/10;
    animation: card_fade_#{$i+1} 4s ease infinite;
  }
}

@for $i from 0 to 4 {
  @keyframes card_fade_#{$i+1} {
    #{$i*20%} { opacity: 0; }
    #{($i+1)*20%} { opacity: 1; }
  }
}