Animation How to - Turn off blinking in a hover with CSS








Question

We would like to know how to turn off blinking in a hover with CSS.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
a.tooltip {<!--from  ww w .  j  ava2  s .  co m-->
  outline: none;
  color: red;
  -webkit-animation: blink .75s linear infinite;
  -moz-animation: blink .75s linear infinite;
  -ms-animation: blink .75s linear infinite;
  -o-animation: blink .75s linear infinite;
  animation: blink .75s linear infinite;
}

@-webkit-keyframes blink { 
   0% {opacity: 1;}
   50%{opacity:1;}
   100%{opacity:0;}
}
@-moz-keyframes blink { 
   0% {opacity: 1;}
   50%{opacity:1;}
   100%{opacity:0;}
}
@keyframes blink { 
   0% {opacity: 1;}
   50%{opacity:1;}
   100%{opacity:0;}
}
a.tooltip:hover {
  color: black;
  -webkit-animation: none;
  -moz-animation: none;
  animation: none;
}
</style>
</head>
<body>
  <a class="tooltip">java2s.com</a>
</body>
</html>

The code above is rendered as follows: