Как сделать,чтоб при убирании курсора анимация плавно возвращалась?

Question

[zhrjnnrdzjj]

https://codepen.io/geharka/pen/bGRVwVb
Нужно сделать,чтоб когда курсор убирался с элемента,анимация возвращалась к началу с той же скоростью,с которой она происходила при наведении.
И еще,нужно чтоб когда анимация доходила до конца,она не "сбрасывалась" к началу.

Answer 1

[Владислав Черненко]

как минимум задать обратный путь, вы же сами ее прерываете на другом размере...

@keyframes square {
  from {
    width: 100px;
    height: 100px;
  }
  25% {
    height: 100px;
    width: 200px;
  }
  50% {
    width: 200px;
    height: 200px;
  }
  75% {
    width: 200px;
    height: 100px;
  }
  to {
    width: 100px;
    height: 100px;
  }
}

не "сбрасывалась" к началу

без js не получится, у вас она работает пока активный :hover

Answer 2

[zombtron]

Вот так работает, но с анимацией и при загрузке.
На css.
Как-то и этот косяк убирается., но мне лень думать как. )

.square{
    height: 100px;
    width: 100px;
    background: red;
    animation-fill-mode: forwards;
    animation-direction: alternate;
    animation: squareq linear 1s;

}
.square:hover{
    animation: square linear 1s;
}

@keyframes square {
  from {
    width: 100px;
    height: 100px;
  }
  25% {
    height: 100px;
    width: 200px;
  }
  50% {
    width: 200px;
    height: 200px;
  }
  75% {
    width: 200px;
    height: 100px;
  }
  to {
    width: 100px;
    height: 100px;
  }
}


@keyframes squareq {
  from {
    width: 100px;
    height: 100px;
  }
  25% {
    height: 100px;
    width: 200px;
  }
  50% {
    width: 200px;
    height: 200px;
  }
  75% {
    width: 200px;
    height: 100px;
  }
  to {
    width: 100px;
    height: 100px;
  }
}