Show and Hide table row with animations

tr.row-hidden {
  display: none;
  opacity: 0;

  animation: hide 2s;
}

tr {
  display: table-row;
  opacity: 1;

  animation: show 1s;
}

@keyframes show {
  from {
    display: none;
    opacity: 0;
  }
  to {
    display: table-row;
    opacity: 1;
  }
}

@keyframes hide {
  from {
    display: table-row;
    opacity: 1;
  }
  to {
    display: none;
    opacity: 0;
  }
}