如何修正CSS动画实现卡片从下方向上出现的效果？

现有一段CSS动画代码，当前卡片动画呈现从上到下/卷动展开的效果，想要修改为从下方向上出现的动画，相关代码如下：

/* Animation */
.pricing-items-container{
    position: relative;
}
.pricing .pricing-items{
    margin-top: -190px;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0;
    transition: 1s;
    visibility: hidden;
    opacity: 0;
    /*transition: visibility 0s, opacity 0.5s linear;*/
}
.pricing .pricing-items.active{
    visibility: visible;
    opacity: 1;
    position: relative;
    height: 100%;
    z-index: 2;
}

要实现从下往上的出现动画，需要调整初始状态的位移逻辑和过渡属性，具体修改如下：

1. 调整容器与初始状态样式 #

• 给容器添加overflow: hidden，避免初始状态下元素溢出显示
• 移除margin-top: -190px，改用transform: translateY(100%)让元素初始时完全处于容器下方
• 移除height: 0，改为由内容决定高度（或设置height: auto），同时明确元素宽度匹配容器
• 明确过渡属性为transform和opacity，保证动画流畅性

2. 调整激活状态样式 #

• 移除position: relative，保持绝对定位维持位移逻辑
• 添加transform: translateY(0)，让元素从下方回到容器内
• 保留可见性与层级相关属性

修改后的完整代码：

/* Animation */
.pricing-items-container{
    position: relative;
    overflow: hidden; /* 隐藏容器外溢出内容 */
}
.pricing .pricing-items{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%; /* 匹配容器宽度 */
    transform: translateY(100%); /* 初始时完全在容器下方 */
    transition: transform 1s ease, opacity 1s ease;
    visibility: hidden;
    opacity: 0;
}
.pricing .pricing-items.active{
    visibility: visible;
    opacity: 1;
    transform: translateY(0); /* 激活后回到容器内 */
    z-index: 2;
}

关键说明 #

• 使用transform实现位移动画，相比调整margin或height性能更优，是现代CSS动画的推荐方式
• 明确过渡属性可以避免不必要的样式参与过渡，提升动画流畅度
• 容器的overflow: hidden是必要的，能隐藏初始状态下元素在容器外的部分

内容的提问来源于stack exchange，提问作者Yaroslav