Kevin Powell - Community•4mo ago

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

Yido•4mo ago

code: https://codepen.io/SirYido/pen/oNOxygq

SirYido

CodePen

oNOxygq

...

missymae#2783•4mo ago

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.

Kevin Powell•4mo ago

Right now you have three <div class="eyes">.

<div class="eyes"></div>

<div class="eyes" id="eye1"></div>
<div class="eyes" id="eye2"></div>

<div class="eyes"></div>

<div class="eyes" id="eye1"></div>
<div class="eyes" id="eye2"></div>

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).

@keyframes eyes_anim {
  from{
    transform: scaleY(1);
  }
  to {
    transform: scaleY(.1);
  }
}

@keyframes eyes_anim {
  from{
    transform: scaleY(1);
  }
  to {
    transform: scaleY(.1);
  }
}

Plus, it's also better for performance 😄

Yido•4mo ago

tysm

Gaming

Programming

Css animation keeps going down and up