css为新学习者设置动画，为什么fadeOut在动画结束时返回

Question

我正在学习css animate，并使用animate.css来运行一个简单的演示，但我感到困惑的是，当动画完成时，fadeOut div会再次出现。< / p>

你可以看到我的演示http://plnkr.co/edit/PpfweRh9xCzfzraep4ex

感谢您的帮助。

Answer 1

如果您不想再次显示，请在动画后添加此行：

var container = document.getElementById('yourID'); //yourID is the id of the div you want to fade
container.style.visibility = 'hidden';

Answer 2

因为animate.css有@keyframes，当@keyframe完成时，样式适用于此anitmation完成

看起来像animate.css：jsfiddle.net/qATqn /

如果你想让风格保持这样：jsfiddle.net/V2gVe /

Answer 3

您需要在元素上设置动画的目标状态。因此，如果您希望它淡出，则需要添加opacity: 0以使fadeOut在完成后粘贴。