Как оставить transform после animation?

Question

Есть у меня анимация, но она сначала анимируется потом обратно в положение возвращается, как оставить чтобы она осталось на transform: rotate(90deg); ?

svg:hover {
  animation: hithere 1s ease infinite; 
}
@keyframes hithere {
  50% { transform: rotate(120deg); }
  70% { transform: rotate(60deg); }
  100% { transform: rotate(90deg); }
}

Answer 1

Уберите infinite и добавьте animation-fill-mode: forwards;

.list {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 10px;
}

.block {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background: orange;
}

.block:hover {
  animation: hithere 1s ease;
  animation-fill-mode: forwards;
}

@keyframes hithere {
  50% {
    transform: rotate(120deg);
  }
  70% {
    transform: rotate(60deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

<div class="list">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
</div>

Answer 2

Поставьте animation: forwards; , вместо animation: infinite;

БЛОГ НА HUSL

Как оставить transform после animation?

Ответы (2 шт):