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

How can I make an animation in CSS stay where it finished animating?

  • 772

I have the following CSS animation for a promotion that should be displayed on hover.

.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">

The problem I have is that once the animation ends the logo hides again.

How can I make the animation continue showing where it last left off while the mouse is hovered over the image using only CSS?

css

1 Answers

  1. Best Answer

    Add to .promo:hoverthe declaration:

      animation-fill-mode: forwards;

    The forwards value will cause the animation to stay in the final state instead of returning to the start.

    .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