9

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

3 回答 3

9

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

#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;}
     }
于 2011-11-21T10:29:42.637 回答
0

您可以暂停播放百分比(按照您的示例):

@-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 秒,依此类推...

希望这可以帮助!

于 2014-08-19T14:13:27.100 回答
0

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

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

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

你的分区:

 <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

于 2013-06-17T15:16:57.843 回答