在css3动画中添加延迟时间

我只是将动画设置为div并成功。现在我想证明它是因为它的延迟太短！所以我怎么可以添加动画（0％至25％）和动画（25％〜50％）这里之间的延迟时间是代码：在css3动画中添加延迟时间

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

来源

2011-11-21 Jayce Lin

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

#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-21 10:29:42 gefangenimnetz

我做了类似的事情，但它太复杂了http://jsfiddle.net/HhREH/1/这就像发射7种不同的弹弓以这种方式，1分钟后，他们所有的人相互碰撞。 –

我遇到了这个问题，据我所知，没有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);} 
}

通过d elaying动画和使用不透明，你可以做qutie几件事情，如果这不利于调查的jQuery

来源

2013-06-17 15:16:57 Switchfire

可以暂停与播放百分比（以下你的例子）：

@-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-19 14:13:27 user2367101

在css3动画中添加延迟时间

回答

相关问题