Html css平滑地移动元素

为了使userface更加用户友好，我希望实现以下功能：

我有一张

表格

，上面有一些

警报

。看看

当我关闭警报表时，“跳”到顶部。我希望它能平稳地滑动。我想使用

纯css

。我读过关于过渡和动画的书，但我认为这不是我需要的，或者我错了

---

有什么想法吗？提前谢谢

K，因此您可以使用纯css来实现。引导在淡出开始时从警报中删除中的

。我们可以使用它将css应用于警报，然后再将其从页面中删除

.fade {
    max-height: 400px;
    -webkit-transition: .3s;
        -ms-transition: .3s;
            transition: .3s;
}

.fade:not(.in) {
    max-height: 0;
}

查看它的实际操作：
K，这样您就可以使用纯css来完成它。引导在淡出开始时从警报中删除

中的

。我们可以使用它将css应用于警报，然后再将其从页面中删除

.fade {
    max-height: 400px;
    -webkit-transition: .3s;
        -ms-transition: .3s;
            transition: .3s;
}

.fade:not(.in) {
    max-height: 0;
}

看看它的实际效果：
Roope，谢谢，但我一直在寻找纯css解决方案，比如过渡工作，你知道动画就是你所需要的。只需将警报高度动画设置为零（向上滑动）或缩放它以获得缩小效果。Roope，谢谢，但我正在寻找纯css解决方案，类似于transition works，你知道动画就是你所需要的。只需将警报高度动画设置为零（向上滑动）或缩放警报高度即可实现缩小效果。添加了供应商前缀，以获得更广泛的浏览器支持。所以它在大多数浏览器上都不起作用。更新了示例代码和fiddle。添加了更广泛的浏览器支持所需的供应商前缀。所以它在大多数浏览器上都不起作用。更新了示例代码和fiddle。