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 回答