这个css 的animation怎么使两次循环间不出现中断，不是循环一次顿一下然后再继续下次循环，

Posted 2023-05-04

这个css 的animation怎么使两次循环间不出现中断，不是循环一次顿一下然后再继续下次循环，把这个顿一下怎么去了，每次循环快结束时都会速度变慢，然后停止，再重新旋转。想让它一直匀速转

参考技术A DJ跳的操作方法：
第一步：调整键盘设置（如果您不习惯这样也可以不用更改设置）
首先，我们建议您更改游戏中的键盘设置，系统默认的设置对于操作还不太熟练的玩家来说有些小小的阻碍。更改路径：游戏设置—按键设置
玩家推荐设置：道具A、跳跃S、加速D
第二步：学习两段跳
新手刚开始可以试着用加速（按住冲刺键）使自己在高速跑动中连跳两次，期间不要放开加速，这样可以很明显的发现使用这种方法，无论是跳的距离还是跳的速率，都比一般的跳法要快的多。
第三步：学会节省体力
体力值表现为头像旁边的蓝色气值，在跑步过程中，体力值的累积需要一定时间，而其耗用速度也很快，如果一直按住冲刺不放，体力值很快便会用完，DJ便会中断。
那么，现在您要做的就是在进行第2跳的同时放开加速键，这样你就可以省下将近一半的体力。即，按住冲刺键至最高速时，按下第一次跳跃，然后马上松开冲刺按键，接着按第二次跳跃。
不要认为很难,其实多练几遍就可以熟悉了，你会惊喜地发现自己在跳跃的时候，身旁边出现类似“风痕”的加速轨迹，那就说明一次DJ成功！
第四步：连贯DJ
一次DJ对整场比赛的速度的帮助并不算大，接下来大家需要练习的是将每一次的DJ连贯起来。
速度是DJ的关键，简单地说：越快效果越好。起跳时如果速度不够，DJ往往会变成简单的2次跳跃，并不合格。在第一DJ完毕，如果你不进行任何操作，角色落地后速度马上又会变慢，所以在落地的瞬间再按住加速，同时迅速起跳，这便又回到DJ第一步了。是的,只要可以连续做出这样的步骤,你就学会了一般DJ！

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 就可以了