CSS3 animation动画,循环间的延时执行该怎么弄
发布网友
发布时间：2022-04-24 00:17
共8个回答
热心网友
时间：2022-04-06 11:53
1、@keyframes规则。from{属性：值;} to{属性：值;}。
2、0%{属性：值;} 100%{属性：值;}0% 是动画的开始，100% 是动画的完成。可以在二者之间加入25%，50%等。
3、将动画绑定到选择器：在样式中，设置动画属性animation，自定义动画名称和时长。
4、规定动画开始时的等待时间：animation-delay：时间；可以为秒、毫秒2s，2ms。
5、播放次数：animation-iteration-count：次数；永久播放的值取infinite。
6、动画速度曲线：animation-timing-function：变化类型；变化类型有：linear 匀速；ease-in 开始慢；ease-out 结束慢；ease 动画有一个缓慢的开始，然后快，结束慢。
扩展资料
animation 属性是一个简写属性，用于设置六个动画属性：
1、animation-name
规定需要绑定到选择器的 keyframe 名称。
2、animation-ration
规定完成动画所花费的时间，以秒或毫秒计。
3、animation-timing-function
规定动画的速度曲线。
4、animation-delay
规定在动画开始之前的延迟。
5、animation-iteration-count
规定动画应该播放的次数。
6、animation-direction
规定是否应该轮流反向播放动画。
注释：请始终规定 animation-ration 属性，否则时长为 0，就不会播放动画了。
热心网友
时间：2022-04-06 13:11
1、@keyframes规则。from{属性：值;} to{属性：值;}。
2、0%{属性：值;} 100%{属性：值;}0% 是动画的开始，100% 是动画的完成。可以在二者之间加入25%，50%等。
3、将动画绑定到选择器：在样式中，设置动画属性animation，自定义动画名称和时长。
4、规定动画开始时的等待时间：animation-delay：时间；可以为秒、毫秒2s，2ms。
5、播放次数：animation-iteration-count：次数；永久播放的值取infinite。
6、动画速度曲线：animation-timing-function：变化类型；变化类型有：linear 匀速；ease-in 开始慢；ease-out 结束慢；ease 动画有一个缓慢的开始，然后快，结束慢。
热心网友
时间：2022-04-06 14:45
1、给div添加animation属性即可添加动画效果了。
2、虽然添加已经给div添加了动画的名称，但是因为没有设置动画的运动过程所以暂时不动。
3、接着就可以用@keyframes来指定动画的运动过程了噢。而后面的名称要跟刚才设置的一样(bdjy)才行。
4、然后可以from和to来表示动画从初始到结束的过程。
5、然后里面设置属性的变化值即可完成动画效果。
6、当然也可以设置动画从头到尾执行然后再从尾到头执行。
7、当然如果想要比较精细的控制css3动画效果也可以用百分比的形式来设置。
热心网友
时间：2022-04-06 16:37
animation定义和用法
animation 属性是一个简写属性，用于设置六个动画属性：
animation-name
animation-ration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
默认值：
none 0 ease 0 1 normal
注释：请始终规定 animation-ration 属性，否则时长为 0，就不会播放动画了。
语法
animation: name ration timing-function delay iteration-count direction;animation-name
规定需要绑定到选择器的 keyframe 名称。。
animation-ration
规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function
规定动画的速度曲线。
animation-delay
规定在动画开始之前的延迟。
animation-iteration-count
规定动画应该播放的次数。（值：n次，infinite无限循环）
animation-direction
规定是否应该轮流反向播放动画。
总结：
根据上述属性，只需要根据具体情况设置animation-delay和animation-iteration-count即可。
例如：
div{
animation:mymove 5s 5s infinite;
-webkit-animation:mymove 5s 5s infinite; /* Safari 和 Chrome */
}
热心网友
时间：2022-04-06 18:45
给你一个例子：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.item1{
list-style: none;
-webkit-animation: revolving 4s 0s infinite;
animation: revolving 4s 0s infinite;
}
@-webkit-keyframes revolving{
0,75%{
-webkit-transform: perspective(700px) rotateX(90deg);
}
87.5%{
-webkit-transform: perspective(700px) rotateX(0deg);
}
100%{
-webkit-transform: perspective(700px) rotateX(-90deg);
}
}
</style>
</head>
<body>
<ul>
<li class="item1">梅西与美洲杯失之交臂</li>
</ul>
</body>
</html>
把总动画设为4秒，然后前75%也就是3秒都没变化（0-75%），之后的25%也就是1秒做动画就可以了。
热心网友
时间：2022-04-06 21:09
name:自定义的名称，用于之后做动画。
5s : 5秒就是本次执行的全程时间
10s: 10秒就是等10秒，然后再执行。
infinite：循环，这个就是根本停不下来。
热心网友
时间：2022-04-06 23:51
webkit-animation: revolving 4s 0s infinite;
animation: revolving 4s 0s infinite;
}
@-webkit-keyframes revolving{
0,75%{
-webkit-transform: perspective(700px) rotateX(90deg);
}
87.5%{
-webkit-transform: perspective(700px) rotateX(0deg);
}
100%{
-webkit-transform: perspective(700px) rotateX(-90deg);
}
}
把总动画设为4秒，然后前75%也就是3秒都没变化（0-75%），之后的25%也就是1秒做动画就可以了。
热心网友
时间：2022-04-07 02:49
还有一个是每个动画周期开始前延迟两秒执行，每个动画前25%让其保持原位然后之后再做动画操作。
是不是这样呢
