css动画后不恢复，css动画keyframes

请问要怎样设置,animation执行后不会重新返回来呢?

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

2、将动画绑定到选择器：在样式中，设置动画属性animation，自定义动画名称和时长。规定动画开始时的等待时间：animation-delay：时间；可以为秒、毫秒2s，2ms。

3、首先，准备好HTML前期工作以及对DIV的一个简单设置。然后，新建keyframes元素，命名为myFirst。然后，可以在设置百分比，不仅仅只能设置4个，大家可以根据需求设置。这时候，可以为他写上各种百分比的颜色。

相关问答

Q1: 为什么CSS3过渡动画有时候会不灵?尤其是鼠标移入多次后就过渡就不灵了...

如图所示 ，第一个参数表示的是要过渡的属性值，第二个参数表示的是过渡时间，这里我就设置背景过渡。接着再设置鼠标经过div元素时背景颜色为暗蓝色。

css3的transition允许css的属性值在一定的时间区间内平滑地过渡。

正文开始 本来只想总结animation，但是转念一想，该先看看transition的，毕竟都跟动画有关系吼。那么先来说一下transition。transition CSS3的过渡功能就像是一种黄油，可以让CSS的一些变化变得平滑。

Q2: 如何用js使得一个已经结束的css3的animation动画重新执行一遍

通过按钮的click事件反复触发一个元素的css3动画，点击一次，动画效果就跑一次。

移不动请检查该元素是否有position：relative。或者自己用js封装一个动画。

如果可以用js来控制的话，定义好两个css动画class，当一个动画结束了删除该class，再加上下一个动画的class，就好了。如果要用纯css，则可以通过在动画里设置百分比来设置动画。

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

播放次数：animation-iteration-count：次数；永久播放的值取infinite。

Q3: 利用css3制作淡入淡出动画效果时淡出后没多久就消失了

1、可以淡入淡出效果、固定头部。淡入淡出效果：使用CSS3的transition属性来实现淡入淡出效果。将vant粘性布局的opacity属性设置为0，然后使用JavaScript或Vue的transition组件来触发opacity属性的变化，从而实现淡入淡出效果。

2、进入性能选项，取消选择 淡入淡出或滑动菜单到视图，再点保存修改就可以了。

3、把总动画设为4秒，然后前75%也就是3秒都没变化（0-75%），之后的25%也就是1秒做动画就可以了，具体的democan参见demo。循环动画由几幅画面构成，要根据动作的循环规律确定。

4、材料/工具：ppt2016 首先我们打开ppt2016，并创建两个幻灯片页面。点击工具栏中的切换标签。然后点击预设的淡出效果，在切换动画生效的幻灯片页面左侧会多出动画标签。

Q4: css3动画如何在动作结束时保持该状态不变

1、none：不改变默认行为。forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

2、首先，准备好HTML前期工作以及对DIV的一个简单设置。然后，新建keyframes元素，命名为myFirst。然后，可以在设置百分比，不仅仅只能设置4个，大家可以根据需求设置。这时候，可以为他写上各种百分比的颜色。

3、以逗号进行分隔。对应的脚本特性为animationFillMode。

4、将动画绑定到选择器：在样式中，设置动画属性animation，自定义动画名称和时长。规定动画开始时的等待时间：animation-delay：时间；可以为秒、毫秒2s，2ms。

css动画后不恢复的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css动画keyframes、css动画后不恢复的信息别忘了在本站进行查找喔。