Menu
I have a CSS3 animation, that simply moves a <div> down (via top: 0px; to top: 300px;). But my problem is, I don't know how to prevent the <div> from returning to the top when the animation is finished. Is there a way I can prevent this?
Here's a sample fiddle: http://jsfiddle.net/y8tJ7/
586
For anyone who gets here and is using an <animate> tag: fill="freeze" is the solution.
CSS helps to animate HTML elements without using JavaScript. You can play and pause the animation applied to HTML elements using animation-play-state property of CSS.
CSS animations emit events, so you can use the animationend event to intervene when the animation ends. const element = document. getElementById("element-to-be-animated"); element. addEventListener("animationend", () => { // Set your final state here.
The CSS animation-delay property has the following syntax: animation-delay: [time] | initial | inherit; As you can see, there are three possible values: time, initial, and inherit. The first option is [time], which is the number of seconds or milliseconds before the animation starts.
You need to invert the animation like so.
@keyframes move {
from{
top: 20px;
}
}
See http://jsfiddle.net/gleezer/y8tJ7/1/
This way its finishing position is specified in the div styling and you only specify the beginning state in the keyframe.
EDIT: Another way of achieving it could be to simply add:
animation-fill-mode: forwards.
See this other fiddle.
Some more info about it on Mozilla Dev Network.
102
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
