从动画到过渡的平滑“过渡”答案

【问题标题】：Smooth "transition" from animation to transition从动画到过渡的平滑“过渡”
【发布时间】：2015-05-07 10:44:42
【问题描述】：

我有一个带有循环动画的元素，其中元素无限地上下反弹。我想这样做，当您将鼠标悬停在元素上时，它会在弹跳的峰值处暂停，直到您将鼠标移出元素，此时它会继续其动画。

我做不到……我也想确保它顺利完成。

这是一个糟糕的尝试：jsfiddle

.test {
    width: 50px;
    height: 50px;
    background: blue;
    display: inline-block;
    position: absolute;
    bottom: 10px;
    -webkit-animation: bounce 1s infinite;
            animation: bounce 1s infinite;
}

div:hover {
    bottom: 20px;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}

@-webkit-keyframes bounce {
  0% {
    bottom: 10px;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    bottom: 20px;
  }
  40% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    bottom: 10px;
  }
  55% {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  75% {
    bottom: 20px;
  }
  80% {
    -webkit-transform: rotate(720deg);
            transform: rotate(720deg);
  }
  80.01% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes bounce {
  0% {
    bottom: 10px;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    bottom: 20px;
  }
  40% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    bottom: 10px;
  }
  55% {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  75% {
    bottom: 20px;
  }
  80% {
    -webkit-transform: rotate(720deg);
            transform: rotate(720deg);
  }
  80.01% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

【问题讨论】：

我相信一些大师会证明我错了......但我不相信这在纯 CSS 中是可能的。没有 CSS 事件处理程序可以告诉您动画何时完成等。
到目前为止我同意@kthornbloom。很确定您必须使用一些 JS 或 jQuery 以编程方式在动画中的某些点添加类以获得您正在寻找的内容。然后你冒着事情不同步发生和动画变得不稳定的风险，但应该有一些创造力。

标签： css animation hover transition

【解决方案1】：

我不知道在玩 css 时会以任何方式影响 css 属性。

但真正接近您需求的是设置animation-play-state

.test:hover {
    animation-play-state: paused;
}

在其轨道上停止动画并从暂停的地方继续。

DEMO

【讨论】：