尝试复刻视频中的cubic-bezier CSS过渡动画失败，寻求帮助

你的代码无法触发目标动画的核心问题是：仅在:hover状态下声明了过渡规则，但未定义元素 hover 时的具体尺寸变化——浏览器没有明确的目标值，自然无法执行过渡动画。结合你要复刻的弹性缩放效果（先超调再回弹），以下是修正方案：

修正后的完整代码 #

<img class="item" src="https://cdn.pixabay.com/photo/2024/07/03/08/05/hot-air-balloon-8869138_1280.jpg" alt="热气球">
<img class="item" src="https://cdn.pixabay.com/photo/2024/07/03/08/05/hot-air-balloon-8869138_1280.jpg" alt="热气球">
<img class="item" src="https://cdn.pixabay.com/photo/2024/07/03/08/05/hot-air-balloon-8869138_1280.jpg" alt="热气球">
<img class="item" src="https://cdn.pixabay.com/photo/2024/07/03/08/05/hot-air-balloon-8869138_1280.jpg" alt="热气球">
<img class="item" src="https://cdn.pixabay.com/photo/2024/07/03/08/05/hot-air-balloon-8869138_1280.jpg" alt="热气球">

<style>
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.item {
  width: 300px;
  transition: width 0.5s cubic-bezier(.87,-1.38,.03,1.54);
}

.item:hover {
  width: 320px;
}
</style>

关键修改说明 #

1. 迁移过渡规则到默认状态：把transition属性从.item:hover移到.item中，确保鼠标移入、移出时都有过渡动画，而不是仅移入生效。
2. 明确hover时的目标尺寸：在.item:hover中添加width: 320px（可根据需求调整数值），给浏览器提供过渡的目标值，触发动画执行。
3. 优化基础布局：给body添加flex布局、内边距和间距，解决图片默认块级排列的换行问题，让元素展示更整齐。
4. 补充可访问性内容：为图片添加有意义的alt属性，符合网页开发规范。

内容的提问来源于stack exchange，提问作者A.Copland