隐藏元素的反向-webkit-animation迭代答案

【问题标题】：reverse -webkit-animation iteration for hiding element隐藏元素的反向-webkit-animation迭代
【发布时间】：2011-10-06 08:08:34
【问题描述】：

我有这个用于 div 的动画出现在屏幕上，因此它来自底部并停留在其最终位置。

@-webkit-keyframes slide {
  from  {  opacity: 0;  -webkit-transform: translateY(500px); }
  to    {  opacity: 1;  -webkit-transform: translateY(0);     }
}

.module {
    -webkit-animation: slide .4s 0 1 normal ease none;
}

我在想是否有可能当我为该 div 分配 class='done' 时，它可以采用相同的动画并反向播放它来模拟隐藏 div 的相同效果。喜欢：

.module.done {
    -webkit-animation: slide .4s 0 1 alternate ease none;
}

但在第二种情况下，它似乎总是从第 1 次迭代开始，我想反转动画，以便它可以从原始位置开始，然后向上滑动 500px

是否可以使用相同的动画来实现，还是必须创建一个具有反转值的新动画？

谢谢

【问题讨论】：

标签： google-chrome css webkit

【解决方案1】：

我相信您可以通过将动画延迟设置为适当的负值来做到这一点（因此它从第一次反转开始）。

【讨论】：

【解决方案2】：

此特定用例最适用于 CSS 过渡，此外，您还可以获得免费的 Opera 和 FF 3.5+ 支持。这是基本语法：

#notice {
  -vendor-transition: -webkit-transform 2s ease;
}

#notice.pop {
  -vendor-transform: translateY(50px);
}

当您添加或删除 .pop 时，动画会自动为您完成。

查看工作示例： http://jsfiddle.net/qLKzX/

【讨论】：

感谢@Duopixel，这是一个非常好的观点，它清楚地解决了问题:)