在 css3 动画中添加延迟时间答案

【问题标题】：add delayed time in css3 animation在 css3 动画中添加延迟时间
【发布时间】：2014-08-19 22:13:27
【问题描述】：

我只是为一个 div 设置了一个动画，它成功了。现在我想证明它，因为它的延迟太短了！那么如何添加动画（0% 到 25%）和动画（25% 到 50%）之间的延迟时间这是代码：

#flow{
      position:absolute;
      -webkit-animation:mymove 10s ease-in-out;
      -webkit-animation-iteration-count:3;
      -webkit-animation-delay:1s;
     }

@-webkit-keyframes mymove
    {
       0%{left:5px;}
       25%{left:127px;}
       50%{left:249px;}
       75%{left:371px;}
       100%{left:5px;}
     }

大家！感谢大家的关注！我找到了答案，但是我不知道关键帧百分比定义的Api！如果你知道的话，请帮我一把，非常感谢！

@-webkit-keyframes mymove
{
   0%{left:5px;} 
   25%{left:127px;}
   26%{left:127px;}
   27%{left:127px;}
   28%{left:127px;}
   29%{left:127px;}
   30%{left:127px;}
   31%{left:127px;}
   32%{left:127px;}
   33%{left:127px;}
   34%{left:127px;}
   35%{left:127px;} 
   50%{left:249px;}
   75%{left:371px;}
   100%{left:5px;}
 }

【问题讨论】：

标签： css css-animations

【解决方案1】：

我认为您不能延迟动画的单个部分。您可以做的是使用两个动画并延迟启动它们。

#flow{
      position:absolute;
      -webkit-animation:
          mymove_first 10s 0s 10 ease-in-out,
          mymove_second 10s 2s 10 ease-in-out;
     }

@-webkit-keyframes mymove_first
    {
       0%{left:5px;}
       25%{left:127px;}
     }

@-webkit-keyframes mymove_second
    {
       50%{left:249px;}
       75%{left:371px;}
       100%{left:5px;}
     }

【讨论】：

我做了类似的事情，但它太复杂了jsfiddle.net/HhREH/1 这就像以这样的方式发射 7 个不同的弹弓，1 分钟后它们都相互碰撞。

【解决方案2】：

我遇到了这个问题，据我所知，没有jQuery你不能延迟帧。

您可以延迟动画的开始。您还可以让动画完成与原始帧相同的状态。

我使用的意思是能够制作多个动画，例如：

你的 div：

 <div id="bannerImg" class="banner-RunAnimation"></div>

运行动画

.RunAnimation {
                      -webkit-animation: animation1 3s 0s 1 ease-in-out,
                      animation2 5s 5s 1 ease-out forwards;
             }

动画：

@-webkit-keyframes animation1 { 
0%  {-webkit-transform: translateY(-0px);}
50% {-webkit-transform: translateY(-150px);}
100% {-webkit-transform: translateY(-150px); 
        opacity:0;}
}       

@-webkit-keyframes animation2 { 
0%  {transform: translateY(-0px);}
100% {transform: translateY(-150px);}
}

通过延迟动画和使用不透明度，你可以做一些事情，如果这对 jQuery 没有帮助

【讨论】：

【解决方案3】：

您可以暂停播放百分比（按照您的示例）：

@-webkit-keyframes mymove
{
   0%{left:5px;} 
   25%{left:127px;}
   35%{left:127px;} 
   50%{left:249px;}
   75%{left:371px;}
   100%{left:5px;}
 }

您不需要将所有百分比都放在 25% 到 35% 之间，浏览器会忽略它们。您从 0 到 25% 从像素 5 移动到 127，如果您的动画是 10 秒，则需要 2.5 秒才能完成，然后在 25% 到 35% 之间暂停 1 秒，因为它不会移动相同的像素然后继续下一个动画到像素 249，需要 1.5 秒，依此类推...

希望这会有所帮助！

【讨论】：