Always playing css animation when adding/removing class from div

Question

at the moment I move a div by adding/removing a class (playing), which is working perfectly. Now I want this to be more smooth and thought about adding some css animations. The problem is, I dont understand how to add an animation, which is playing when Im either removing or adding this class. Is this even possible?

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

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

I tried this for the transition from top to bottom (the result of adding the playing class to my div), but it didnt work:

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

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

How can I do this?

Answer 1

For animations, you can use the CSS attribute transition.
Have a look here.

In your example, you can use something like

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

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

1. That means that the transition applies on margin-top changes
2. The animation has a duration of 5 seconds
3. And has a linear speed curve