悬停时悬停动画“跳跃”

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>