Css animation keeps going down and up
The animation i made for a div class keeps going up and down while playing, is there a way to fix this?
4 Replies
You are animating the div that contains sits above both eyes so that div is also animating its height. Moving the animation into your #eye1, #eye2 group will probably fix.
Right now you have three
<div class="eyes">
.
That first one on the top has the animation on it, but the two after it are under that div... we don't see it because it has no styling on it other than the height + width from the animation, but it's there, and as it grows, the two eyes under it are being pushed down. Removing that first div mostly fixes the problem.
The other issue is, animating height will always make things move up/down, so even though removing that will stop them moving so much, the animation will happen from the "top".
I'd suggest animating scale
instead, because then you can use transform-origin
if you want to chang where the transformation is happening from (center, top, bottom, left, right, etc).
Plus, it's also better for performance 😄tysm