css3 animation delay between keyframe?

Question

 .blink_me { -webkit-animation-name: blinker; -webkit-animation-duration: 1s; -webkit-animation-delay: 2s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-name: blinker; -moz-animation-duration: 2s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; animation-name: blinker; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; } @-webkit-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } } 

 <span class="blink_me">This Will Blink</span> 

I added -webkit-animation-delay: 2s; but the delay triggered at the beginning not at between, how can I make delay happens in between so that the blinking speed is slower?

Answer 1

You can just extend the time and make the animation run faster by making it finish before 100% . You get the idea, so just work out the timing you want.

 .blink_me { -webkit-animation-name: blinker; -webkit-animation-duration: 2s; -webkit-animation-delay: 2s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-name: blinker; -moz-animation-duration: 2s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; animation-name: blinker; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; } @-webkit-keyframes blinker { 0% { opacity: 1.0; } 25% { opacity: 0.0; } 50% { opacity: 1.0; } } 

 <span class="blink_me">This Will Blink</span> 

Answer 2

try adjusting the animation loop like this:

 .blink_me { -webkit-animation-name: blinker; -webkit-animation-duration: 2s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-name: blinker; -moz-animation-duration: 2s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; animation-name: blinker; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; } @-webkit-keyframes blinker { 0% { opacity: 1.0; } 25% { opacity: 1.0; } 50% { opacity: 0.0; } 75% { opacity: 0.0; } 100% { opacity: 1.0; } } } 

 <span class="blink_me">This Will Blink</span>