移动端的css动画停止不了，css动画不流畅

怎么解决css中动画卡顿的问题

1、总结解决CSS3动画卡顿方案尽量使用transform做动画，避免使用height，width，margin，padding等；原因是： 根据定义，CSS 的transform属性不会更改元素或它周围的元素的布局。

2、JavaScript负载过高：有时候卡顿问题与其他JavaScript代码的执行冲突有关。确保JavaScript代码优化良好，避免长时间或高占用的操作阻塞UI线程。

3、故可以考虑使用CSS3 animation来控制动画播放，避免使用gif动态图。其实际原理为，把动态图拼接成当行排列的雪碧图，通过CSS3 animation控制雪碧图的移动速度，进而模拟gif的图片播放效果。

4、原因：CSS3新添加的Transform不会引起文档的重新布局。

5、导致卡顿的另一个原因是渲染层面的问题，例如浏览器或应用程序尝试处理滚动时可能在渲染和响应之间出现滞后。这种情况可以使用CSS属性，如transform或will-change定义包含动画或实时渲染的元素。

6、在存储卡在长时间的使用中会逐渐造成手机启动速度降低，明因此磁盘整理成为必要。建议用腾讯手机管家清理手机内存，内容包括缓存垃圾、系统垃圾、广告垃圾清理加速，达到优化空间的目的。空间优化了，自然卡顿也会得到改善。

相关问答

Q1: css3动画播放后如何停止在最后的状态

用css3的思路就是重新设置一个伪类的动画，把前面的动画给覆盖了。这样的话，我们就可以把伪类要改变的东西设置为动画效果，然后直接覆盖上去就行了。

延迟delay：想在某个属性开始执行样式变化后的多少秒，才让另一个属性开始进行样式的动态变化，就可以使用延迟。

说明：您可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。注：Internet Explorer 9 以及更早的版本不支持 animation-play-state 属性。

paused；} //反正animation-play-state属性已经不支持低级浏览器了。所以不需要考虑hover的兼容效果。要是想长时间的停止。用JS插入这个属性就好了。

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

c3实现你这个需求很麻烦，建议你用JQ的animate：(el).animate({top： -=20，right：-=30}， 600)；移不动请检查该元素是否有position：relative。或者自己用js封装一个动画。

Q2: 手机css3动画不运行的原因是什么?

1、可能是源代码问题，可以查看源代码，代码不多的，用手机和电脑浏览，注意那个充电头的动画。

2、所以说，当系统接收到Touch事件之后会优先响应，此时会暂停屏幕上包括js、css的渲染。这个时候不光是css动画不动了，哪怕页面没有加载完如果你手指头还停留在屏幕上那么页面也不会继续加载，直到你的手松开。

3、从上面的代码可以看出，由于是使用css3强大的动画效果，所以我的结构定义的非常简单（在符合语义的前提下），同时没有引用到javascript脚本文件。

4、} 重新检查并修补了下css文件里所有的关于animation的属性，看来所有针对相关浏览器兼容的代码是必须要同时规范，例如-webkit-animation后面接的一定是@-webkit-keyframes而不是@keyframes，后面所写的其他动画才会一并生效的。

Q3: css3动画设置什么时候暂停,用animation-play-state:paused如何设置?_百...

1、animation-play-state：paused；} //反正animation-play-state属性已经不支持低级浏览器了。所以不需要考虑hover的兼容效果。要是想长时间的停止。用JS插入这个属性就好了。

2、CSS3 animation-play-state属性作用：animation-play-state 属性规定动画正在运行还是暂停。语法：animation-play-state： paused|running；paused：规定动画已暂停。running：规定动画正在播放。

3、animation-play-state 规定动画是否正在运行或暂停。默认是 running。

Q4: CSS3关于动画的问题,动画停止后让他的display等于none,再让他等于bl...

1、fadeIn（速度，[回调]）通过改变所有匹配元素的不透明度来实现淡入效果，并在动画可选地触发一个回调函数后完成。这个动画只调整元素的不透明度，即所有匹配元素的高度和宽度不会改变。

2、如果你的class navimove是动态添加的，那么在IOS上，animation-play-state属性无法生效。也就是一直都是pause状态了。建议使用display：none | block；来控制。或者使用js优化控制。

3、在 CSS3 出现之前，动画都是通过 JavaScript 动态的改变元素的样式属性来完成了，这种方式虽然能够实现动画，但是在性能上存在一些问题。CSS3 的出现，让动画变得更加容易，性能也更加好。

4、那个是从：opacity： 1； 到 opacity： 0； 跟display没关系，display表示展现方式，透明度才能确定渐变程度。

Q5: css3动画在移动端uc浏览器中不能动怎么办

魅族note2上UC，火狐，chrome，魅族自带浏览器均有动画。只有手机Opera没有动画。可以试一下加上针对不同浏览器的css前缀补全。或者在meta里加上浏览器打开h5模式的标识。

哦，这是UC浏览器没有的功能，网页上的动态图片都是不会动的，只以静态的形式显示，浏览器不支持。但你使用手机自带浏览器试一试，因为我上自带浏览器上一些网站的时候，有些图片可以以动态的形式显示，觉得生动多了。

uc浏览器视频不能拖动因为第1页面里面的视频在网页制作的过程中设置了，不能够拉动进度或进行快进或慢放的设置，所以无法进行进度的拉动。将视频保存在相册播放就可以拖动了。

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