How to make animation pause on hover but continue once mouse leaves

Question

I've tired of several solutions and this is the closest I've gotten. But I'm still not happy with how it turned out, because when the mouse leaves the element, the element reverts to its original rotation. The idea is that if you go over the element, it will trigger the animation even if the mouse leaves the element. If you hover over the element, it plays an animation and stays at 0 degrees, and once the mouse leaves, another animation plays and rotates back to -8 degrees. consstelements=document.getElementsByClassName('rota

P粉322319601 · Answer

Pure CSS solution (second animation needs to be prevented)

You don’t need JS or any fancy classes. transform and transition-duration will do.

Let's start with the HTML; this is still your code, but simplified:


  Just a basic explanation of the picture.

Now, the main part: CSS. Since your card is rotated by -8 degrees by default, we've added a rule to do this:

.rotate_left {
  transform: rotate(-8deg);
  transition-duration: 1s;
  transition-delay: 0.25s;
}

If you hover . Polaroid over it, it will rotate back to 0 degrees. This means we can use the pseudo class :hover:

.polaroid:hover {
  transform: rotate(0deg);
}

Once you move the mouse away from .poloid, the :hover rules no longer apply. This means it will revert to the previous rule within 1 second, starting 0.25 seconds after the mouse is gone.

try it:

.rotate_left {
  transform: rotate(-8deg);
  transition-duration: 1s;
  transition-delay: 0.25s;
}

.polaroid:hover {
  transform: rotate(0deg);
}

/* Demo only */

.polaroid {
  border: 1px solid #bfbfbf;
  border-radius: 2%;
  padding: 10px 15px;
  height: 200px;
  width: 280px;
  box-shadow: 10px 10px 5px #aaa;
}


  Just a basic explanation of the picture.

Prevent the second animation from stopping

To prevent recovery from stalling, some JS is required.

First, we declare some constants:

const card = document.querySelector('.rotate_left');

const duration = 1000; // Duration of animation, in milliseconds.
const delay = 250; // Delay before animation, in milliseconds.

const keyframes = [
  { transform: 'rotate(-8deg)' },
  { transform: 'rotate(0deg)' },
];
const options = {
  duration, delay,
  fill: 'forwards'
};

Then we create a handler:

const handler = () => {
  // New mouse over & leave should not mess with current animation.
  if (card.classList.contains('rotating')) {
    return;
  }
  
  // Let ourselves know that an animation is playing.
  card.classList.add('rotating');
  
  let animation;
  
  if (card.classList.contains('not_rotated')) {
    // Rotated to 0 degree, reverting.
    animation = card.animate([...keyframes].reverse(), options);
  } else {
    animation = card.animate(keyframes, options);
  }
  
  // Make sure we clean after ourselves after animation.
  animation.finished.then(() => {
    card.classList.remove('rotating');
    card.classList.toggle('not_rotated');
  });
};

Add this as an event handler for 'mouseover'/'mouseleave' and we're done:

card.addEventListener('mouseover', handler);
card.addEventListener('mouseleave', handler);

try it:

const card = document.querySelector('.rotate_left');

const duration = 1000; // Duration of animation, in milliseconds.
const delay = 250; // Delay before animation, in milliseconds.

const keyframes = [
  { transform: 'rotate(-8deg)' },
  { transform: 'rotate(0deg)' },
];
const options = {
  duration, delay,
  fill: 'forwards'
};

const handler = () => {
  if (card.classList.contains('rotating')) {
    return;
  }
  
  card.classList.add('rotating');
  
  let animation;
  
  if (card.classList.contains('not_rotated')) {
    animation = card.animate([...keyframes].reverse(), options);
  } else {
    animation = card.animate(keyframes, options);
  }
  
  animation.finished.then(() => {
    card.classList.remove('rotating');
    card.classList.toggle('not_rotated');
  });
};

card.addEventListener('mouseover', handler);
card.addEventListener('mouseleave', handler);

.rotate_left {
  transform: rotate(-8deg);
}

/* Demo only */

.polaroid {
  border: 1px solid #bfbfbf;
  border-radius: 2%;
  padding: 10px 15px;
  height: 200px;
  width: 280px;
  box-shadow: 10px 10px 5px #aaa;
}


  Just a basic explanation of the picture.

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

Pure CSS solution (second animation needs to be prevented)

Prevent the second animation from stopping