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)
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(<integer>, <jump-start | jump-end | jump-none | jump-both | start | end>[]?) 设置动画的速度曲线
animation-iteration-count：infinite | <number> 设置动画播放的次数
animation-direction：normal | reverse | alternate | alternate-reverse 规定下一个周期是否逆向播放
每个循环内动画向前循环，即结束后重置到起点重新开始
反向运行，由尾到头
交替反向运行
反向交替，反向开始交替
animation-fill-mode：none | forwards | backwards | both 动画停了之后位置什么状态
animation-play-state：running | paused 动画是否正在进行或暂停
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">@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%; } }</pre>
三者的区别点：
transition是过渡，强调样式值得变化过程，只有开始和结束；需要通过hover或js等事件来配合触发；只能触发一次
animation也叫关键帧，通过@keyframe结合可以设置中间帧得一个状态；且可以不触发事件就触发过程；可触发多次
transform是转换，指的是改变元素得外观，没有动画效果，唰的一下就改变了
