How to split div rotation on mouse hover into 2 phases (slow, then fast)?

Issue

I have a div with the following hover effect: transform: rotateY(180deg); so it’s a container that flips on mouse hover. How can I make it so that instead of rotating instantly 180deg, it would slowly rotate 10deg, and then if the mouse is still hovering it, 180deg?

.flip-card-inner {
       transition: transform 0.6s;
       transform-style: preserve-3d;
  }

  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
 }

Solution

You can achieve this by making an animation instead of a transition.

Make sure to use animation-fill-mode: forwards so that the animation stays in place until you stop the :hover. I used 30deg for demonstration purposes.

In your animation, make sure it starts on transform: rotateY(0deg) so it animates from 0deg to 30deg as well (optionally you could just apply transform: rotateY(0deg) directly on .flip-card-inner and start the animation at @keyframe 10%).

Play a bit with the @keyframes values and the animation-duration-property to adjust it to your liking.

.flip-card:hover>.flip-card-inner {
  /* Shorthand for animation-name, animation-duration, animation-fill-mode */
  animation: flip 2s forwards;
}

.flip-card-inner {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  transform-style: preserve-3d;
}

@keyframes flip {
  0% {
    transform: rotateY(0deg);
  }
  10% {
    transform: rotateY(30deg);
  }
  70% {
    transform: rotateY(30deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}
<div class="flip-card">
  <div class="flip-card-inner">card</div>
</div>

Answered By – Sigurd Mazanti

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.