CSS3 animation动画，循环间的延时执行该怎么弄

Posted 2023-05-18

跟你举个例子吧，你在页面上面新建<div id="loading"></div>

#loading
color:#000;
border-width: 4px;
width: 40px;
height: 40px;
border-style: solid;
border-color: #ccc #eee red blue;
border-radius: 24px;
-webkit-animation: "loading" 1s infinite linear;/***一秒循环执行**/

@-webkit-keyframes "loading"/**关键帧名称**/
0%-webkit-transform: rotate(0deg);
100%-webkit-transform: rotate(360deg);

/**只用了webkit你拥google打开就行了**/

参考技术A 这个问题不是很清楚哦。。不过我会努力的。

css3的-webkit-animation动画执行后会变回原来的样子，怎么保留住动画最后的状态呢？

保留住动画的最后状态2113，在animation后面加上forwards就可5261以了代码如下：4102

-webkit-animationanimations 1s ease 1 forwards  

注意：动画如果只执行一次，1653通过css无法办到，可以把动画结束时的样式写入一个class中，用js在动画结束时把class赋给这个对象。

扩展资料

CSS animation 与 CSS transition 有何区别

一、指代不同

1、animation ：属性是一个简写属性，用于设置六个动画属性。

2、transition：属性是一个简写属性，用于设置四个过渡属性。

二、特点不同

1、animation ：animation: name duration timing-function delay iteration-count direction，规定需要绑定到选择器的 keyframe 名称。规定完成动画所花费的时间，以秒或毫秒计。

2、transition：transition: property duration timing-function delay，规定设置过渡效果的 CSS 属性的名称。规定完成过渡效果需要多少秒或毫秒。

参考技术A

保留住动画的最后状态，在animation后面加上forwards就可以了代码如下：

-webkit-animationanimations 1s ease 1 forwards  

注意：动画如果只执行一次，通过css无法办到，可以把动画结束时的样式写入一个class中，用js在动画结束时把class赋给这个对象。

扩展资料：

animation的其他用法：

1. -webkit-animation-duration   表示动画持续的时间

2. -webkit-animation-timing-function  表示动画使用的时间曲线

3. -webkit-animation-delay    表示开始动画之前的延时

4. -webkit-animation-iteration-count  表示动画要重复几次

5. -webkit-animation-iteration-count: times_number;

6. -webkit-animation-direction   表示动画的方向

参考技术B animation-fill-mode : forwards //设置对象状态为动画结束时的状态
animation-fill-mode
语法：
animation-fill-mode：none | forwards | backwards | both [ ,
none | forwards | backwards | both ]*
默认值：none

适用于：所有元素，包含伪对象:after和:before

继承性：无
取值：

none：
默认值。不设置对象动画之外的状态

forwards：
设置对象状态为动画结束时的状态

backwards：
设置对象状态为动画开始时的状态

both：
设置对象状态为动画结束或开始的状态

说明：

检索或设置对象动画时间之外的状态

如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为animationFillMode。

这个是最简单的方法，
也可以侦听动画结束事件，给元素加个class类名，这个class定义的就是元素结束时的状态的css样式 参考技术C 动画如果只执行一次，光通过css无法办到，可以把动画结束时的样式写入一个class中，用js在动画结束时把class赋给这个对象。追问

我是这样做的，不过我总觉得有更好的办法。你做webapp开发吗？

本回答被提问者和网友采纳 参考技术D -webkit-animationanimations 1s ease 1 forwards 最后加这个forwards 就可以了