Question

我有一个页面，其中包含一个输入字段和一个＆＃34; next＆＃34;按钮。当用户点击下一个时，我想缩小输入字段并删除＆＃34; next＆＃34;按钮。我的主要工作方式如此Bootply所示。我的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; }

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

https://developer.mozilla.org/en/docs/Web/CSS/animation-fill-mode

CSS动画不停留

1 个答案: