Question

我只是将动画设置为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;}
 }

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

Answer 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

Answer 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移动到25％，如果你的动画是10秒，则需要2.5秒才能完成，然后在25％到35％之间暂停1秒，因为它不会移动相同的像素然后继续下一个动画到像素249，需要1.5秒，依此类推......

希望这有帮助！

在css3动画中添加延迟时间

3 个答案: