CSS动画没有留下来

Question

我的页面具有输入字段和一个"下一个"按钮。当用户单击下一步时，我想缩小输入字段并删除"下一个"按钮。我的功能主要如在此引导中所见。我的CSS动画看起来像这样：

    .default {
        transition: all 1.0s ease;
    }
    .exit {
        padding-left:5rem;
        padding-right:5rem;
    }
    .remove-button {
        animation: animate-remove-button 1.0s;
    }
    @keyframes animate-remove-button {
        from {
            transform:scaleX(1.0);
            opacity: 1.0;
        }
        to {
            transform:scaleX(0);
            opacity: 0;
        }
    }

动画运行。但是，在动画完成后，按钮重新出现。此外，我基本上希望按钮的宽度一直缩小到0，以使文本字段生长。但是，正如您在Bootply中看到的那样，这并没有真正发生，即使它看起来像它。

我缺少什么？

Answer 1

.remove-button {
  animation: animate-remove-button 1.0s;
  animation-fill-mode: forwards;
}

动画填充模式：forwards 告诉保持动画的最后状态。

文档：https：//developer.mozilla.org/en/docs/web/css/animation-fill-mode