@charset "utf-8";

/* CSS Document */

.animated-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial;
}

.animated-table th {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  	background-color: #cbb991;
}

.animated-table td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  	background-color: #fbf4e5;
}

/* Animatie start */
.animated-table tr {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeSlide 0.5s ease forwards;
  
  
  /*  Hier zit de magie */
  animation-delay: calc(var(--i) * 0.8s);
}

/* Header meteen zichtbaar */
.animated-table tr:first-child {
  opacity: 1;
  transform: none;
  animation: none;
}

/* Keyframes */
@keyframes fadeSlide {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}