使用JS增删动画类实现的UI动画不流畅，是否有更优实现方案？

• CSS 动画默认的animation-fill-mode属性值为none，动画执行完成后会自动回退到元素初始样式，所以你悬停时scrunch动画跑完后，图片会立刻回弹到50%高度，无法保持压缩状态
• 切换类名时，旧类移除后元素没有对应高度规则支撑，会先跳回默认高度再执行新类的动画，就会出现生硬的跳变效果

方案1：使用 transition 实现（更简单，无需 JS 逻辑） #

这个交互场景完全可以用纯 CSS 实现，不需要依赖 keyframes 动画和 JS 操作类名，代码更简洁也不会出现跳变问题：

/* 给图片元素设置基础样式与过渡效果 */
.scrunchy-box-head {
  height: 50%;
  transition: height 1s ease;
}
/* 父元素悬停时直接修改图片高度 */
#scrunchyBox1:hover .scrunchy-box-head {
  height: 10%;
}

直接删除原有定义的@keyframes规则、scrunch/unscrunch类，以及对应的 JS 事件监听代码即可正常运行。

方案2：保留原有 keyframes 写法的修复 #

如果需要保留你当前的动画写法，只需要给动画添加forwards填充模式，让动画结束后保持最后一帧的状态即可：

.scrunch {
  animation: scrunch 1s forwards;
}

.unscrunch {
  animation: unscrunch 1s forwards;
}
/* 额外添加默认高度规则，避免类名切换时的跳变 */
.scrunchyBoxHead {
  height: 50%;
}

内容的提问来源于stack exchange，提问作者russellmania