Stop animation and start transition on hover

Question

I have a link that\'s running an infinite animation with the background color. I want to stop the animation and transition into a different background color on hover.

<

Answer 1

I was trying to achieve the same kind of thing and after trying to dynamically change keyframes and all, I found a weird solution by using basic css, see fiddle here. It is not very elegant but does exactly what I (and you, I hope) want.

#menu, #yellow{
  position: fixed;
  top: 2.5vw;
  right: 2.5%;
  height: 25px;
  width: 25px;
  border-radius: 30px;
}

#menu{
  animation: blink 2s infinite;
	transition: 1s;
}

@keyframes blink{
  0% { background-color: grey; }
  50% { background-color: black; }
  100% { background-color: grey; }
}

#yellow{
	background-color: rgba(255, 0, 0, 0);
	transition: 1s;
}

#disque:hover #yellow{
	pointer-events: none;
	background-color: rgba(255, 0, 0, 1);
}

#disque:hover #menu{
	opacity: 0;
}