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
Post a Comment