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

【问题标题】：Animate opacity and delay transition CSS动画不透明度和延迟过渡 CSS
【发布时间】：2014-05-31 07:51:57
【问题描述】：

我有一系列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; }
}

【问题讨论】：

试试 jquery 会节省你的时间
我不能使用 jQuery，对不起
请也提供 HTML
@user1876246 我推荐的animation-delay 方法对你有用吗？

标签： css css-transitions css-animations

【解决方案1】：

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

【讨论】：