CSS div "teleports" instead of sliding

@keyframes fly {
from {top: initial;}
to {top: -100px;}

^That’s the code in question. However, instead of smoothly “flying” (sliding) off the screen, the purple circle in the middle just teleports away. Any ideas on how to fix this?

Edit: I’ve figured out the issue - if top is set to “intial”, the animation doesn’t move slowly. Is there anyway to calculate the initial top value of a div that’s been centered?

Try changing from {top: 0px;} to from {top: initial;} and you’ll see the error.
1 Like

Have you set an animation property for your target div?

1 Like

Yup - animation: fly 1.5s forwards ease-in;
I just edited it, check out the new details.

Does 0px instead of initial work for you, it basically uses no change in position

1 Like

top: 0px; teleports the div into a position as if it has margin-top: 0, and then slides it away.
So from the devtools, the top is “276.5px” - I could set it like that, but it could change based on the viewport size.

Hey, that gave me ideas! I set top: 50vh and it works like a charm.

1 Like

That works and I use that for other properties too, but you can also use top: 100%;, in case someone ever buys a ultrawide screen and puts in potriat mode

top: 100% for the animation?

yeah, but I think I saw some weird behavior when I changed it to that