從 div 添加/刪除 class 時始終播放 css animation

Question

目前，我通過添加/刪除 class （ playing ）來移動 div，效果很好。 現在我希望這更流暢，並考慮添加一些 css 動畫。 問題是，我不明白如何添加一個 animation，當我刪除或添加這個 class 時，它正在播放。 這甚至可能嗎？

.description-container {
    position: absolute;
    margin-top: -11%;
}

.description-container.playing {
    margin-top: 0%;
}

我嘗試了從上到下的過渡（將播放 class 添加到我的 div 的結果），但它沒有用：

.description-container.playing {
    animation: top-to-bottom 1s ease-in forwards;
}

@keyframes top-to-bottom {
    100% {
        margin-top: 0%;
    }
}

我怎樣才能做到這一點？

Answer 1

對於動畫，您可以使用 CSS 屬性transition 。
看看這里。

在您的示例中，您可以使用類似

.description-container {
    position: absolute;
    margin-top: -11%;
    transition: margin-top 5s linear;
}

.description-container.playing {
    margin-top: 0%;
}

1. 這意味着過渡適用於margin-top變化
2. animation 的持續時間為 5 秒
3. 並具有linear速度曲線