CSS-transition、transform、animation之间的区别

transition 过渡：一个元素在不同状态之间切换时定义不同的过渡效果

属性值：transition-property transition-duration transition-timing-function transition-delay 属性名称 持续时间 速度曲线 何时开始

实例代码： transition: margin-right 4s ease-in-out 1s;

多种效果，以逗号分隔

实例代码： transition: margin-right 4s, color 2s;

• transition-property：指定哪个或哪些属性用于过渡 也可用none/all表示没有过渡动画/所有可被动画的属性都表现过渡动画

• transition-duration：指定过渡的时长，不接收负值

• transition-timing-function：指定一个函数，定义属性值怎么变化

• ease

• ease-in

• ease-out

• ease-in-out

• cubic-bezier(1,1,1,1)

• linear

• step-start

• step-end

• steps(4, end)

• jump-start | jump-end | jump-none | jump-both | start | end

• transition-delay：规定在过渡效果开始之前需要等待的时间s/ms

小球移动实例代码

transform 变换：旋转、缩放、倾斜、平移等操作 !只能转换盒模型的

属性值：matrix() translate() scale() rotate() skew()

实例代码

rotate(19deg) 正角表示顺时针旋转，负角表示逆时针旋转

scale() 增大/减小元素的大小

skew() 用于拉伸/平移

translate() 移动

animation 动画：用来指定一组或多组动画

属性值： animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state

animation-name 设置动画的名称

animation-duration 设置动画完成的周期

animation-delay 设置动画什么时候开始

animation-timing-function：linear | ease | ease-in | ease-out | ease-in-out |step-start | step-end | steps(, []?) 设置动画的速度曲线

animation-iteration-count：infinite | 设置动画播放的次数

animation-direction：normal | reverse | alternate | alternate-reverse 规定下一个周期是否逆向播放

每个循环内动画向前循环，即结束后重置到起点重新开始

反向运行，由尾到头

交替反向运行

反向交替，反向开始交替

animation-fill-mode：none | forwards | backwards | both 动画停了之后位置什么状态

animation-play-state：running | paused 动画是否正在进行或暂停

@keyframes slidein { from { transform: translateX(0%); } to { transform: translateX(100%); } } @keyframes identifier { 0% { top: 0; left: 0; } 30% { top: 50px; } 68%, 72% { left: 50px; } 100% { top: 100px; left: 100%; } }

三者的区别点：

transition是过渡，强调样式值得变化过程，只有开始和结束；需要通过hover或js等事件来配合触发；只能触发一次

animation也叫关键帧，通过@keyframe结合可以设置中间帧得一个状态；且可以不触发事件就触发过程；可触发多次

transform是转换，指的是改变元素得外观，没有动画效果，唰的一下就改变了