animation、transition、transform的区别

简述

1.transform用于元素旋转、缩放、移动、倾斜等效果

2.transition用于较为单一的动画

3.animation一般用于较为复杂、有中间态的动画
复制代码

用法

1.transform

transform是通过修改CSS视觉格式化模型的坐标空间来实现的。

常用属性有 scale()、rotate()、translate()、matrix()、skew()根据给定的X轴Y轴元素翻转给定的角度。
属性可以单独使用也可叠加使用。
复制代码

transform: scale(2, 0.5) // x轴缩放2倍，y轴缩放0.5倍
transform: rotate(0.5turn) // 顺时针旋转0.5圈
transform: rotate(140deg) // 顺时针旋转140度
transform: translate(120px, 160px) //  x轴平移120px,y轴平移160px
transform: skew(30deg,20deg) // x轴旋转30度,y轴旋转20度
transform: matrix(1, 2, 3, 4, 5, 6) // 6个值的矩阵（需要再详细）
transform: scale(0.5) translate(-100%, -100%); // x、y轴缩放0.5倍，再根据自身长宽向左向上translate移动100%（100%是由自身宽高决定的）
复制代码

2.transition transitions

可以为一个元素在不同状态之间切换的时候定义不同的过渡效果
。比如在不同的伪元素比如:hover，:active或者通过JsvaScript实现的状态变化。
复制代码

	name	duration	timing function	delay
transition：	margin-right、transform、opacity	2s	ease-in-out	2.5s

3.animation

animation属性是如下属性的一个简写形式：animation-name,animation-duration,
animation-timing-function,animation-delay,animation-iteration-count,
animation-direction,animation-fill-mode
复制代码

	duration完成动画所花费的时间	timing function规定动画的速度曲线	delay动画开始之前的延迟	iteration-count动画播放的次数	direction是否应该轮流反向播放动画	fill-mode动画不播放是（当动画完成时，或当动画有一个延迟未开始播放时）样式	play-state指定动画是否正在运行或已暂停	name
animation：	3s	linear、ease-in	1s	2	reverse	both	paused	slidein

value	parameters
animation-name(绑定到选择器的keyframe名称)：	slidein
animation-duration(动画指定需要多少秒或毫秒完成)：	3s
animation-timing-function(设置动画将如何完成一个周期)：	linear 、 cubic-bezier-timing-function 、 step-timing-function 、 frames-timing-function
animation-delay(设置动画在启动前的延迟间隔)：	3s
animation-iteration-count(定义动画的播放次数)：	infinite 、 number
animation-direction(指定是否应该轮流反向播放动画)：	normal 、 reverse 、 alternate 、 alternate-reverse
animation-fill-mode(规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式)：	none、 forwards 、backwards 、 both
nimation-play-state(指定动画是否正在运行或已暂停)：	running 、 paused

附：animation里的steps()用法

steps()是一个timing function,允许我们将动画或者过渡分割成段，而不是从一种状态持续到另一种状态的过渡。最核心的一点就是：timing-function作用域每两个关键帧之间，而不是整个动画。

steps(<number_of_steps>,<direction>)
复制代码

这个函数有两个参数——————第一个参数是一个正值number，指定我们希望动画分割的段数。第二个参数定义了这个要点在我们的@keyframes中申明的动作将会发生的关键。这个值是可选的，在没有传递参数时，默认为“end”.“start”和“end”指定在每个间隔的起点或是终点发生阶跃变化，默认为end。 方向为“start”表示一个左--持续函数，在动画开始时，动画的第一段将会马上完成。以左侧端点为起点，立即跳到第一个setp的结尾处。它会立即跳到第一个step的结尾处。它会立即跳到第一段的结束并且保持这样的状态直达第一步的持续时间结束。后面的每一帧都将按照此模式来完成动画。

方向为“end”表示一个右--持续函数。动画执行时，在每一帧里，动画保持当前状态直到这一段的持续时间完成，才会跳到下一步的起点，后面的每一帧都会按照这个模式来进行，在最后一帧的起点，等到这一帧的持续时间结束，整个动画的执行也已经结束，执行东湖阿德元素来不及跳到这一帧的终点，直到回到了整个动画起点，开始 第二次动画。每个选择本质上从一个不同的面移动这个圆度并且将产生一个不同的位置在这个相同的动画里。

animation: circle 2s step(3, start) infinite;
@-webkit-keyframes circle {
    0% {
        background: red
    }
    50% {
        background: yellow
    }
    100% {
        background: blue
    }
}
step-start: 黄色与蓝色相互切换
step-end：红色与黄色相互切换
复制代码

参考：css动画里的steps()用法详解