jquery - text shadow on off with a fade -


i have text, , text shadow applied it. want behave "on/off".

css:

a.playnowanchor.glow {   text-shadow: 1px 0px 20px #fff; }  

html:

<a href="#" class="playnowanchor">play now</a> 

i have achieved effect jquery:

setinterval(function() {         $('a.playnowanchor').toggleclass('glow');     }, 400); 

and works fine, transition happen well.

can done somehow css, because not know way jquery?

you can use css animation achieve this.

for repetition include infinite in animation example:

body {background:salmon} /* testing purpose */    a.playnowanchor {      -webkit-animation: animate .6s infinite;      -moz-animation: animate .6s infinite;      animation: animate .6s infinite;  }     /* keyframes */  @-webkit-keyframes animate{      0% {text-shadow: none;}      50% {text-shadow: 1px 0px 20px #fff;}      100% {text-shadow: none;}  }  @-moz-keyframes animate{      0% {text-shadow: none;}      50% {text-shadow: 1px 0px 20px #fff;}      100% {text-shadow: none;}  }  @keyframes animate{      0% {text-shadow: none;}      50% {text-shadow: 1px 0px 20px #fff;}      100% {text-shadow: none;}  }
<a href="#" class="playnowanchor">play now</a>


Comments

Popular posts from this blog

google chrome - Developer tools - How to inspect the elements which are added momentarily (by JQuery)? -

angularjs - Showing an empty as first option in select tag -

php - Cloud9 cloud IDE and CakePHP -