We would like to know how to turn off blinking in a hover with CSS.
<!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: