Question

我正在尝试在悬停元素时使动画播放反向。它不起作用，我不明白为什么以及如何让它工作。 “动画”只是跳回到关键帧0％而没有任何动画。

该代码段仅适用于Chrome和Safari。

<div></div>

:hover

这只是一个非常简化的示例，所以请不要建议使用非动画方法（除了动画结合foreach($article['elements'] as &$article_element) {...}上的转换，我尝试过这种转换也无法工作）。< / p>

这更接近真实世界的代码：https://codepen.io/connexo/pen/eBxMqO

我对基于Javascript的解决方案也不感兴趣，只有CSS。

Answer 1

我没有使用reverse而是创建了另一个与当前动画相反的动画。

我这样做了：http://codepen.io/anon/pen/zoeWLO

＆＃13;

div {
  -webkit-animation-fill-mode: forwards;
  animation-duration: 2s;
  animation-name: a;
  background-color: #a00;
  display: inline-block;
  padding: 50px;
}

div:hover {
  -webkit-animation-fill-mode: forwards;
  animation-duration: 2s;
  animation-name: ra;
}

@keyframes a {
  0% {
    padding: 50px;
  }
  100% {
    padding: 100px 200px;
  }
}

@keyframes ra{
    0% {
       padding: 100px 200px;
  }
  100% {
  padding: 50px;
 }
}

＆＃13;

<div></div>

＆＃13;

<强>校正： Safari桌面支持reverse：https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction

这是我对使用＆＃39;反向＆＃39;跳跃行为的猜测。 - 在悬停时不会再次播放关键帧a的动画。

关键帧a的动画在2秒后达到100％。现在你移动你的鼠标。reverse的效果，{100}的a现在为0％，这使它变得更小。但由于关键帧a已经完成播放，div只会跳转到0％而不是转换为100％。

反转CSS动画：悬停

1 个答案: