I have a series of DIVS, I want DIV 1 & DIV 3 to fade out and then DIV 2 and DIV 4 to slide left to take their place, 1 second after the fade. So far I have gotten them to fade out but I cannot figure out how to delay the sliding. Follows is my CSS, ignore the lack of vendor prefixes for this question please.

.slide-show{
  -webkit-animation: fadeShow 0.25s 1 normal forwards ease-out;
  animation: fadeShow 0.25s 1 normal forwards ease-out;
  visibility: visible;
}

.slide-hide{
  -webkit-animation: fadeHide 0.25s 1 normal forwards ease-out;
  animation: fadeHide 0.25s 1 normal forwards ease-out;

  //I need the following to be delayed for 1 second
  visibility: hidden;
  position: absolute;
}

@keyframes fadeHide{
  0%   { opacity: 1; }
  100% { opacity: 0; }
}


@keyframes fadeShow{
  0%   { opacity: 0; }
  100% { opacity: 1; }
}