动画和过渡超时不起作用答案

【问题标题】：Animation and transition timeout isn't working动画和过渡超时不起作用
【发布时间】：2015-07-17 21:50:41
【问题描述】：

这是一个可以玩的小提琴：https://jsfiddle.net/qgchhn99/

我正在尝试延迟动画和过渡，但由于某种原因它不起作用。动画和不透明度过渡会立即运行，而不是等待 4 秒。

我收到了一条在提交表单时出现的状态消息（类是动态添加的）：

<p class="success success--auto-hide">Some message</p>

然后我有这个动画，它会在 4 秒后隐藏元素：

@-webkit-keyframes cssAnimation {
  to {
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }
}

@keyframes cssAnimation {
  to {
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }
}

不过，我也希望隐藏平滑，所以我在opacity 上添加了一个过渡以及隐藏动画：

.success {
  color: green;
  opacity: 1;
  -webkit-transition-delay: 4s;
  transition-delay:         4s;
  -webkit-transition: opacity 4s ease-in-out;
  transition:         opacity 4s ease-in-out;
}

.success--auto-hide {
  opacity: 0;
  -webkit-animation-delay: 4s;
  animation-delay:         4s;
  -webkit-animation: cssAnimation 0s ease-in 4s forwards;
  -moz-animation:    cssAnimation 0s ease-in 4s forwards;
  -o-animation:      cssAnimation 0s ease-in 4s forwards;
  animation:         cssAnimation 0s ease-in 4s forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode:         forwards;
}

我确定我已经接近正确了，那么我应该如何修改它以便动画和过渡在执行前等待 4 秒？

【问题讨论】：

标签： css animation transition

【解决方案1】：

使用.success--auto-hide 类，您已经在动画开始之前隐藏了元素，使用'opacity: 0;'。

当你删除它时，它工作正常！

此外，您现在将延迟时间设置为两次，因此您也可以删除动画延迟属性。

请看这里：http://codepen.io/anon/pen/WvKjWY

【讨论】：

我需要不透明度过渡与动画并行运行。因为不透明度并没有隐藏它，它只是使它不可见。元素不应该在 8s 之后被隐藏，它应该等待 4s 开始不透明度过渡，然后在 8s 时它应该完全隐藏。你的 codepen 没有做到这一点。

【解决方案2】：

我设法通过将动画持续时间从 0s 增加到 4s 来解决这个问题。将其设置为 0 会导致隐藏动画立即执行，从而防止不透明度过渡与动画并行运行。我还将不透明度持续时间减少到 3s 而不是 4s 以允许在将宽度和高度设置为 0 之前将其完全隐藏，这将导致文本以一种奇怪的方式向下跳动一瞬间，然后它变成完全隐藏。

我还意识到我已经在速记中设置了延迟，因此我可以完全删除 animation-delay 属性。

.success {
  color: green;
  opacity: 1;
  -webkit-transition-delay: 3s;
  transition-delay:         3s;
  -webkit-transition: opacity 4s ease-in-out;
  transition:         opacity 4s ease-in-out;
}

.success--auto-hide {
  opacity: 0;
  -webkit-animation: cssAnimation 4s ease-in 4s forwards;
  -moz-animation:    cssAnimation 4s ease-in 4s forwards;
  -o-animation:      cssAnimation 4s ease-in 4s forwards;
  animation:         cssAnimation 4s ease-in 4s forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode:         forwards;
}

【讨论】：