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
missymae
missymae•8mo 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
Kevin Powell•8mo 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
Yido•8mo ago
tysm
Want results from more Discord servers?
Add your server