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);
  }
}