Home / Questions / 6111
Accepted
devconcept
Asked: 2020-03-22 09:57:59 +0800 CST 2020-03-22 09:57:59 +0800 CST

如何使 CSS 中的动画停留在完成动画的位置？

  • 772

我有以下 CSS 动画，用于应在悬停时显示的促销。

.promo {
  position: fixed;
  right: -410px;
  top: 70px;
}
.promo:hover {
  animation-name: stick-out;
  animation-duration: 1s;
}
@keyframes stick-out {
  from {
    right: -410px;
  }
  to {
    right: 0;
  }
}
<img class="promo" src="http://oi65.tinypic.com/2qkmhvs.jpg" alt="promo">

我遇到的问题是，一旦动画结束，徽标就会再次隐藏。

仅使用 CSS 将鼠标悬停在图像上时，如何使动画继续显示上次停止的位置？

css

1 Answers

  1. Best Answer

    添加到.promo:hover声明中：

      animation-fill-mode: forwards;

    forwards 值将导致动画保持在最终状态，而不是返回到开始。

    .promo {
  position: fixed;
  right: -410px;
  top: 70px;
}
.promo:hover {
  animation-name: stick-out;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes stick-out {
  from {
    right: -410px;
  }
  to {
    right: 0;
  }
}
    <img class="promo" src="http://oi65.tinypic.com/2qkmhvs.jpg" alt="promo">

    • 5