How smoothly break CSS animation on hover with CSS or JS?

user_19400997 0
Viewed 42
  1. Can I smoothly break CSS-animation on hover with CSS or JS?
  2. Why transition don't work after CSS-animation?

Example:

.button {
  animation: resizing 2000ms linear infinite alternate;
  transition: transform 200ms linear; // don't work after animation
}

@media (hover: hover) {
  .button:hover {
    animation: none;
    transform: scale(1.1);
  }
}

@keyframes resizing {
  100% {
    transform: scale(2);
  }
}
css javascript
1 Answers

Please try to rewrite this like below. I hope It may works

.button {
  animation: resizing 2000ms linear infinite alternate;
  transition: transform 200ms linear; 
}

.button:hover {
  animation: none;
  transform: scale(1.1);
}

@keyframes resizing {
  100% {
    transform: scale(2);
  }
}
user_83500810
Related