transition和animation的区别
一、共同点：transition和animation都能在一定时间段内，改变元素的属性值；
二、区别1–触发方式：transition必须通过事件来触发启动，如hover、click事件，让物体进行css的改变；而animation可以直接播放，不需要触发事件；
区别2–帧数：transition只有from到to的两帧，即只有开始和结束的过程；
animation则除了from、to的两帧方式，还可以通过百分比来设置动画的帧数，可以有多帧。
三、补充各自重要属性： Transition：
transform 0.5s linear（transition辅助修改动画效果，动画时间，动画曲线）
transform：rotate、X、Y、Z（360 deg）具体动画操作；
transform-origin:可以从元素的left、right、top、bottom四个边选择两边确定动画的支点；
Animation：
Animation-name：动画名；
Animation-duration：动画每帧的播放时间；
Animation-delay：动画延迟播放秒数；
Animation-iteration-count：动画播放次数，infinite是无限；
Animation-timing-function：动画播放曲线：
ease：低速开始，加速，再低速结束
ease-in：低速开始
ease-out：低速结束
ease-in-out：低速开始和结束
Animation-direction：动画循环方式：alternate代表重复、alternate-reverse往返重复；
难点：设置steps（1，start/end）可以让动画按照一帧一帧播放