Question

我有这个用于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

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

由于

Answer 1

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

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

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

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

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

Answer 2

我相信你可以通过将动画延迟设置为适当的负值来实现这一点（所以它从第一次反转开始）。

用于隐藏元素的反向-webkit-animation迭代

2 个答案: