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?
CodePudding user response:
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%;
}
- That means that the transition applies on
margin-top
changes - The animation has a duration of 5 seconds
- And has a
linear
speed curve