CSS div "teleports" instead of sliding

Coding Help
1 
@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
2

Have you set an animation property for your target div?

1 Like
3

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

4

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

1 Like
5

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
6

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

7

top: 100% for the animation?

8

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