css3 实现动画效果，怎样使他无限循环动下去

 我来答

1个回答

#热议# 发烧为什么不能用酒精擦身体来退烧？

老炉传说
2017-10-24 · TA获得超过136个赞

知道小有建树答主

回答量：172

采纳率：78%

帮助的人：136万

我也去答题访问个人页

关注

展开全部

animation:mymove 5s infinite;

在animation后面加上infinite就可以无限循环，另外还可以做反向循环使用animation-direction

animation-name规定需要绑定到选择器的 keyframe 名称。
animation-duration规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function规定动画的速度曲线。
animation-delay规定在动画开始之前的延迟。
animation-iteration-count规定动画应该播放的次数。
animation-direction规定是否应该轮流反向播放动画。

看下下面的代码

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s infinite;
animation-direction:alternate;

/* Safari and Chrome */
-webkit-animation:myfirst 5s infinite;
-webkit-animation-direction:alternate;
}

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation-direction 属性。</p>

<div></div>

</body>
</html>