动画不透明度和延迟转换CSS

Question

我有一系列DIVS，我想要DIV 1＆amp; 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 ...;