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”表示一个左--持续函数，在动画开始时，动画的第一段将会立刻完成。以左侧端点为起点，当即跳到第一个step的结尾处。它会当即跳到第一个step的结尾处。它会当即跳到第一段的结束而且保持这样的状态直达第一步的持续时间结束。后面的每一帧都将按照此模式来完成动画。

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

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

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

CSS3 animation属性中的steps功能符深刻介绍

记住position参数的含义 牢记这么一句话：一切都是反的！start不是开始，而是结束；end不是结束，而是开始。