Question 46102 in CSS Question posted in
Some basic documentation can be found here.

Return to state CSS animations smoothly

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.

Tags:

2

Answers


  1. 0

    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;
}
    Login or Signup to reply.
  2. 0

    I agree with Ali. Instead of using keyframes, you should use CSS transformations — you have much more control over the transitions. Also, remember to add a transition to your normal state so that it doesn’t snap back on onmouseleave. Adding this to your code will give a smooth return.

    .cake {
  position: relative;
  left: -150px;
  top: 50px;
  transition: all 2s ease;
}

    Note that the two transitions can be different.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search