css3动画和js的动画区别是什么（优缺点在哪里？）

let us fly

已于 2022-08-20 16:28:28 修改

阅读量479

点赞数

分类专栏：面试文章标签： css3 javascript css

于 2022-08-20 15:36:27 首次发布

本文链接：https://blog.csdn.net/server_404/article/details/126440526

版权

面试专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css
优点
1、浏览器会自动优化css动画，使用类requestAnimationFrame的机制运行css动画，不会出现帧率丢失，白屏等问题。
2、元素隐藏时动画效果也会自动卸载，节省浏览器资源。
3、当动画只改变transform和opacity时，动画在浏览器合成线程中运行，在使用cpu合成情况下产生绘图指令，获得更流畅的动画效果
4、大部分浏览器都支持css动画，在低版本浏览器中使用css动画时css会自动降级适应，兼容性高。
缺点
1、无法在运行过程中控制动画的执行，无法在特定的地方或在运行过程中发出响应
2、实现复杂动画效果时代码冗长且往往只实现一个动画，维护性和复用性低

js
优点
1、动画控制力强，可实现css无法实现的动画效果，如动态的曲线运动，视差滚动等效果。
2、js绘制的动画基于dom，在操作上不存在兼容性问题。
3、可以使用requestAnimationFrame浏览器Api解决丢帧，白屏问题
4、可以在动画过程中获得数据响应，并实时调整。
5、可优化方向明确，动画操作可以封装为方法多次复用。

缺点
1、低版本浏览器可能不支持现代浏览器api会导致不同浏览器动画失效，兼容性一般
2、重复的操作DOM元素的css样式，对浏览器性能消耗大，容易造成丢帧，白屏等情况
3、js动画只运行在主线程上，造成阻塞问题。
4、实现复杂动画效果需要大量的逻辑与判断，复杂度高。

使用requestAnimationFrame运行js动画

	<body>
	  <div id='e' style='border:1px solid;width:100px;height:100px;position:relative;'
	  </div>
	  <button id='b'>取消执行动画</button>
	  <button id='c'>执行动画</button>
	</body>
	
	<script>
	window.requestAnimat = (function () { //用来兼容不同浏览器
	    return window.requestAnimationFrame ||
	        window.webkitRequestAnimationFrame ||
	        window.mozRequestAnimationFrame || function (callback) {
	        setTimeout(callback, 1000 / 60);
	    }
	})();
	    
	let e = document.getElementById('e'), b = document.getElementById('b'), c = document.getElementById('c');
	
	//偏移量
	let left = 0;
	//正反方向
	let flag = true;
	let ret = 0;
	
	//动画方法
	function render (){
	    if(flag){
	        e.style.left = e.style.left = `${left++}`;
	        if (left == 100) flag = false;
	    }else{
	        e.style.left = `${left--}`;
	        if (left == 0) flag = true;
	    }
	}
	
	// 挂载方法
	function loopAnim() {
		render();
		ret = requestAnimat(loopAnim);
	};
	    
	// 停止动画，重复调用多时，停止动画也需要对应的调用相同次数，无法一次性停止。
	b.onclick = function () {
		window.cancelAnimationFrame(ret);
	};
	
	// 重复调用，动画方法不会重置，从页面上体现为速度会更快。
	c.onclick = function () {
		loopAnim();
	};
	</script>