Return to state CSS animations smoothly

March 8, 2023

I have been messing about with some css animations and somehow managed to get things to work as required on :hover

My question is how to get them to return to state smoothly after the :hover ends.

I’ve tried variations of animation-fill-mode but nothing seems to work.

    .move img {
  width: 50px;
}

.move {
  font-size: 55px;
  top: 45px;
  position: relative;
  display: inline-block;
}

.move span {
  position: relative;
  display: inline-block;
}

@keyframes move {
  0.0% {
    transform: scale(1) translate(-0px, 0) skew(0deg);
  }

  100% {
    transform: scale(1) translate(0%, 0) skew(0deg) rotate(90deg);
  }
}

@keyframes rotate {
  0.0% {
    transform: scale(1) translate(-0px, 0) skew(0deg);
  }

  100% {
    transform: scale(1) translate(0px, 0px) skew(0deg) rotate(-90deg);
  }
}

.parent:hover .move {
  animation-name: move;
  animation-duration: 1.2s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

.parent:hover .move span {
  animation-name: rotate;
  animation-duration: 1.2s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

JS Fiddle Here to see it in context.

>Solution :

Use transitions instead.

.move img {
  width: 50px;
}

.move {
  font-size: 55px;
  top: 45px;
  position: relative;
  display: inline-block;
  transform: rotate(0deg);
  transition: transform 1.2s ease-out;
}

.move span {
  position: relative;
  display: inline-block;
  transform: rotate(0deg);
  transition: transform 1.2s ease-out;
}

.parent:hover .move {
  transform: rotate(90deg);
  transition: transform 1.2s ease-out;
}

.parent:hover .move span {
  transform: rotate(-90deg);
  transition: transform 1.2s ease-out;
}