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/ |

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; } |
Here’s what we’ve got for you which might like :
Additionally, performing a search on this website can help you. Also, we have YouTube Videos.
Take The Conversation Further ...
We'd love to know your thoughts on this article.
Meet the Author over on Twitter to join the conversation right now!
If you want to Advertise on our Article or want a Sponsored Article, you are invited to Contact us.
Contact Us