animation和transition的区别及使用

Roriring

已于 2023-08-07 09:46:34 修改

阅读量646

点赞数

分类专栏：前端文章标签： animation

于 2020-07-10 17:49:16 首次发布

本文链接：https://blog.csdn.net/Roriring/article/details/107247374

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.animation概念

可以用 name 设置动画的名称，用 duration 设置动画完成的周期，用 timing-function 设置动
画的速度曲线，delay 设置动画什么时候开始，iteration-count 设置动画播放的次数，direction 规定下一
个周期是否逆向的播放，play-state 动画是否正在进行或者暂停，fill-mode 设置动画停了之后位置什么状态

animation 属性是一个简写属性，用于设置六个动画属性：
animation-name	规定需要绑定到选择器的 keyframe 名称。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

2.transition概念

用 property 去设置过渡效果的属性名称，duration 设置过渡效果的周期，timing-function 规
定速度效果的速度曲线，delay 设定过渡效果什么时候开始；

transition 属性是一个简写属性，用于设置四个过渡属性：
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

3.区别

1）transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；
2）animation 配合 @keyframe 可以不触发时间就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；
3）animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；
4）animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧；

4.在性能方面

浏览器有一个主线程和排版线程；主线程一般是对 js 运行的、页面布局、生成位图等等，然后把生成好的位图传
递给排版线程，而排版线程会通过 GPU 将位图绘制到页面上，也会向主线程请求位图等等；我们在用使用 aniamtion 的时候这样就
可以改变很多属性，像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起，页面的回流和重绘，对性
能影响就比较大，但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图，当然也就不会引起
页面的重排了。

5.animation实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子四周滚动</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.main{
				width: 400px;
				height: 400px;
				background: #CCCCCC;
				border: 1px solid;
				margin: auto;
			}
			.flow{
				width: 100px;
				height: 100px;
				background: red;
				animation-name: llj;
				animation-duration: 3s;
				animation-iteration-count: infinite;
			}
			@keyframes llj{
				25%{
					transform: translateX(300px);
				}
				50%{
					transform: translate(300px, 300px);
				}
				75%{
					transform: translateY(300px);
				}
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="flow"></div>
		</div>
	</body>
</html>

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

6.transition实例

<!DOCTYPE html>
<html>
	<head>
		<style> 
			div
			{
			width:100px;
			height:100px;
			background:blue;
			transition:width 2s;
			-moz-transition:width 2s; 
			-webkit-transition:width 2s; 
			-o-transition:width 2s; 
			}

			div:hover
			{
			width:300px;
			}
		</style>
	</head>
	<body>
		<div></div>
		<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
	</body>
</html>