在css3动画中添加延迟时间 [英] add delayed time in css3 animation

问题描述

我只是设置一个动画为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;} 
 32％{left：127px;} 
 33％{left：127px;} 
 34％{left：127px;} 
 35％{left ：127px;} 
 50％{left：249px;} 
 75％{left：371px;} 
 100％{left：5px;} 
} 
  
 
 
解决方案
我不认为你可以延迟动画的单个部分。你可以做什么，是使用两个动画，并延迟启动它们。
  #flow {
 position：绝对; 
 -webkit-animation：
 mymove_first 10s 0s 10 easy-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;} 
} 
  
 
I just set an animation to a div and it succeeded.
Now I want to get it proved because its delay is too short!
so how can I add the delayed time between animation (0% to 25%) and animation (25% to 50%)
here is the code:
#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;}
     }




everyone!Thanks for your attention !I have found the answer but I don't know the Api of the  definition of percentage in keyframes!And if you know sth about it ,just give me a hand ,thanks a lot!
@-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;}
 }

解决方案
I don't think you can delay the single parts of an animation. What you could do, is to use two animations and start them with a delay.
#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;}
     }


                        
这篇关于在css3动画中添加延迟时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！