html - CSS Animation not working in Chrome -
i using familiar script make text blinking css. text blinking in every browser except google chrome. including in inspector view of chrome can see styles there , not inherited. link inside ul/li element if put link outside of if blink effect working inside it not working. here part of code:
#container ul li:last-child { float: right; animation-duration: 900ms; animation-name: blink; animation-iteration-count: infinite; animation-direction: alternate; -webkit-animation: blink 900ms infinite; /* safari , chrome */ } #container ul li { font: bold 14px/32px"lato", "trebuchet ms", arial, helvetica, sans-serif; font-weight: 600; display: block; height: 32px; color: #becbb2; text-decoration: none; letter-spacing: 0.5px; box-sizing: border-box; transition: .2s ease-in; -o-transition: .2s ease-in; -moz-transition: .2s ease-in; -webkit-transition: .2s ease-in; } @keyframes blink { { color: #ff0000; } { color: #becbb2; } } @-webkit-keyframes blink { { color: #ff0000; } { color: #becbb2; } }
<div id="container"> <ul> <li> <a href="link.php"><span>link</span></a> </li> <li style="float:right"> <div class="pdf"><a href="pdf.pdf" target="_blank">download</a> </div> <div class="pdf"> <img src="images/1437596056_pdf.png"> </div> </li> </ul> </div>
here live version, last link on top menu should blinking: http://crystalconsultant.eu/taen-gost/
Comments
Post a Comment