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。

热心网友时间：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

给你一个例子：

<!doctype html>
<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

.xxoo{ animation: name 5s 10s infinite}

name:自定义的名称，用于之后做动画。

5s : 5秒就是本次执行的全程时间

10s: 10秒就是等10秒，然后再执行。

infinite：循环，这个就是根本停不下来。

热心网友时间：2022-04-06 23:51

　　.item{
　　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

animation-delay:2s;
还有一个是每个动画周期开始前延迟两秒执行，每个动画前25%让其保持原位然后之后再做动画操作。
是不是这样呢