Как я могу способствовать тому, чтобы оживление в CSS осталось, где он закончил оживлять?

У меня есть следующее оживление в 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">

Проблема, которая у меня есть, состоит в том, что как только оживление заканчивает logo он вновь прячется.

Как я могу делать для того, чтобы оживление продолжило являться, где последний он остался пока мышь была posicionado на изображении используя только CSS?

1
задан 21.03.2016, 20:03
1 ответ

Добавь его в .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">
3
ответ дан 24.11.2019, 14:42
  • 1
    Спасибо @Carlos Му и # 241; oz! – fredyfx 21.03.2016, 20:36
  • 2
    @Carlos Му и # 241; oz очень хороший!!. Он пытался сделать так, чтобы, сняв hover, он не скрылся сразу, но эта кажется небольшим количеством м и # 225; s осложненная и потребуй javascript. – devconcept 21.03.2016, 21:12

Теги

Похожие вопросы