CSS3 Webkit Blink Animation

Abhishek Ghosh

By Abhishek Ghosh September 30, 2014 11:54 pm Updated on September 30, 2014

CSS3 Webkit Blink Animation

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 :

http://ostr.io/

1	http://ostr.io/

Blink has quite good history. The original Netscape blink had an 80% duty cycle. W3C standard can be read here :

http://www.w3.org/TR/css3-animations/

1	http://www.w3.org/TR/css3-animations/

---

CSS3 Webkit Blink Animation : The Needed Code

We can wrap a text with blink tag :

Text Here

1

Text Here

Chrome and Safari do not support blink : you will not see the sentence blinking. For consistence experience, we need to use CSS like this :

@-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; 
}

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 :

@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;
}

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;

}

Tagged With css animation blink , blink animation , web kit animation blink , html5 animations blink text , CSS3Webkit的过滤器属性 , css3 webkit animation , css blink animation , css animation blink blink-empty , css -webkit-animation , animation:blink

CSS3 Webkit Blink Animation

CSS3 Webkit Blink Animation : Great Examples

CSS3 Webkit Blink Animation : The Needed Code

This Article Has Been Shared 5595 Times!

About Abhishek Ghosh

Here’s what we’ve got for you which might like :

Take The Conversation Further ...

CSS3 Webkit Blink Animation : Great Examples

CSS3 Webkit Blink Animation : The Needed Code

This Article Has Been Shared 5595 Times!

About Abhishek Ghosh

Here’s what we’ve got for you which might like :

Articles Related to CSS3 Webkit Blink Animation

Take The Conversation Further ...