我怎样才能两次申请translateY

Question

我正在学习CSS并使用TranslateY

进行游戏

我遇到了一个问题。当我将鼠标悬停在div上时，会触发JavaScript事件（mouseover）并简单地附加此CSS类，并根据需要从下方滑入新元素

.slideIn{
animation: slide-in 0.5s forwards;
}

@keyframes slide-in {
    0% { transform: translateY(100%); }
    100% { transform: translateY(0%); }
}

我的第一个观察是我的数字向后显示。当它为0％时，平移（意味着沿Y轴移动）100％。对我来说，CSS读取就好像它从位置开始然后向下移动到位置0％。

然而，我想要实现的是当这些元素滑入时，如果我将鼠标悬停在这个新元素上，它会增长一点点。我会怀疑像

这样的东西

.growMore{
animation: grow-more 0.5s forwards;
}

@keyframes grow-more {
    0% { height:100%; }
    100% { height: 150%; }
}

我确实尝试添加另一个TranslateY，但它也没有给出任何结果，因此我尝试使用height

这可能吗？