html5 - How to make blinking/flashing text with CSS 3? -
currently, have code:
@-webkit-keyframes blinker { { opacity: 1.0; } { opacity: 0.0; } } .waitingforconnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); -webkit-animation-duration: 1.7s; } it blinks, blinks in "one direction". mean, fades out, , appears opacity: 1.0, again fades out, appears again, , on... fade out, , "raise" fade again opacity: 1.0. possible?
you first setting opacity: 1; , ending on 0, starts 0% , ends on 100% instead set opacity 0 @ 50% , rest take care of iteself.
.blink_me { animation: blinker 1s linear infinite; } @keyframes blinker { 50% { opacity: 0; } } here, setting animation duration should 1 second, setting timing linear means constant throughout, , last using infinite means go on , on.
note: if doesn't work you, use browser prefixes
-webkit,-moz, on requiredanimation,@keyframes. can refer detailed code here
as commented, won't work on older versions of internet explorer, that, need use jquery or javascript....
(function blink() { $('.blink_me').fadeout(500).fadein(500, blink); })(); thanks alnitak suggesting better approach.
demo (blinker using jquery)
Comments
Post a Comment