We can use CSS3 Webkit blink animation to emphasize a phrase or sentence to draw attention or can use on pure CSS logo. No Javascript needed. RedHat OpenShift has an effect – we gave some idea in our older guide on creating Spinning Logo for WordPress Genesis Framework and Other Themes. Spinning logo required a library, but blink animation will not require anything more than CSS.
CSS3 Webkit Blink Animation : Great Examples
There are lot of creative examples of using CSS3 Webkit Blink Animation, but definitely you will like this web design :
1 | http://ostr.io/ |
Blink has quite good history. The original Netscape blink had an 80% duty cycle. W3C standard can be read here :
1 | http://www.w3.org/TR/css3-animations/ |
Advertisement ---
CSS3 Webkit Blink Animation : The Needed Code
We can wrap a text with blink tag :
1 | Text Here |
Chrome and Safari do not support blink : . For consistence experience, we need to use CSS like this :
1 2 3 4 5 6 7 8 9 10 | @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .css3-blink { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0); -webkit-animation-duration: 1s; } |
You can modify this CSS for finer control of the blink text :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | @keyframes blink { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } @-webkit-keyframes blink { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } .blink { animation: blink 1s step-start 0s infinite; -webkit-animation: blink 1s step-start 0s infinite; } |
