动画不透明度和延迟过渡CSS

Question

我有一系列DIVS，我想要DIV 1 &DIV 3淡出，然后DIV 2和DIV 4向左滑动以取代它们的位置，在淡出后1秒。到目前为止，我已经让它们淡出了，但我不知道如何延迟滑动。下面是我的CSS，请忽略这个问题没有供应商前缀。

.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; }
}

Answer 1

您可以使用属性animation-delay或只是将延迟放在动画简写中。动画简写值的顺序无关紧要，除非同时使用持续时间和延迟时间。animation: valueA valueB DURATION DELAY valueC ...;