CSS 动画平滑倒放问题

查看 48|回复 0
作者:fuxinya   
给一个 div 定义了一个动画,动画效果为:在 1 秒钟内,宽度从 10%增长到 100%
@keyframes myAnimation {
  from {
    width: 10%;
  }
  to {
    width: 100%;
  }
}
我想实现如下效果:
鼠标指针移动上去( hover ),开始播放动画,宽度从 10%增长到 100%,鼠标移出,播放反转动画,宽度从 100%减少到 10%。
但是现在有个问题,当鼠标移上去时间不足 1s (宽度还没增长到 100%,假设此时宽度为 60%)就移出,此时的反转动画不是从当前位置(宽度 60%)反转,而是从 100%宽度开始反转播放,如何解决此问题?
您需要登录后才可以回帖 登录 | 立即注册

返回顶部