CODEWITHSUNDEEP
javascriptjquerycss
James Lemon
James Lemon

Reputation: 426

css3 animation delay between keyframe?

.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?

Upvotes: 0

Views: 1082

Answers (2)

Victor Radu
Victor Radu

Reputation: 2292

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>

Upvotes: 1

Ruddy
Ruddy

Reputation: 9923

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>

Upvotes: 1

Related Questions