悬停时悬停动画"jumps"

Question

我想在 css 中悬停时实现一个简单的动画，但是在悬停时，动画会跳跃并使其看起来很愚蠢。有没有办法避免这种情况？ 我的愿望是，它能像原来

一样转变。代码笔：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>

Answer 1

发生这种情况是因为仅当悬停项目时应用transform-origin: bottom;。未悬停时，它会回退到默认值 -center。将规则移动到::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>