关键帧之间的css3动画延迟？

Question

＆＃13;

＆＃13;

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


}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我添加了-webkit-animation-delay: 2s;但是在开始时触发的延迟不是介于两者之间，如何在两者之间发生延迟以使闪烁速度变慢？

Answer 1

您可以通过在100%之前完成动画来延长时间并使动画更快地运行。你明白了，所以只需计算出你想要的时间。

.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

尝试像这样调整动画循环：

＆＃13;

＆＃13;

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


}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;