This happens because the transform-origin: bottom; is only applied when the item is hovered. When not hovered it falls back to the default – center. Move the rule to the declaration of the ::after.
.item {
width: 20%;
height: 0;
padding-top: 20%;
background-color: blue;
position: relative;
transition: 800ms;
}
.item::after {
position: absolute;
bottom: 0;
height: 30%;
width: 100%;
content: "";
background-color: grey;
transition: transform 800ms ease-in-out;
transform-origin: bottom;
}
.item:hover::after {
transform: scaleY(2);
}
<div class="item"></div>
I want to achive a simple animation on hover in css, but while hovering off, the animation jumps and makes it look silly. Is there a way to avoid that?
My wish would be that it is colapsing the same way it originaly transformed.
Codepen: https://codepen.io/misah/pen/abzRXvL
.item {
width: 20%;
height: 0;
padding-top: 20%;
background-color: blue;
position: relative;
transition: 800ms;
}
.item::after {
position: absolute;
bottom: 0;
height: 30%;
width: 100%;
content: "";
background-color: grey;
transition: transform 800ms ease-in-out;
}
.item:hover::after {
transform: scaleY(2);
transform-origin: bottom;
}
<div class="item">
</div>
Holly cow this was a fast answer and the right one. Thanks, I will mark it as correct as soon as stackoverflow is allowing me.
