transition、transform 区别和应用

先说应用

1.动画循环，复杂的动画用animation。在遇到很复杂的动画那就用animation。因为animation可以定义关键帧。那你就可以控制每一帧的动画效果。

2.简单的动画，事件触发用transition。当页面中的动画是自己执行的那么我们考虑用animation，因为transition是需要借助伪类、js、@madia触发的。常见的伪类是：hover ，：focus。 常见的js就比如click事件。@media可以用于页面缩小到1000px你可以展示你需要的动画。

区别

一、语法：
过渡——transition: 属性名 完成时间 速度曲线 延迟时间;
动画——需要先定义关键帧，再通过animation属性引用关键帧
二、触发：
过渡：需要借助伪类、js、@media触发
动画：自动触发
三、执行次数
过渡：执行一次后不会执行，但是可以借助transitionEnd事件添加循环；
动画：可以通过属性设置循环次数；
四、复杂度
过渡：简单动画效果，可以通过属性展示动画的速度效果
动画：复杂动画效果，可以定义关键帧，控制每一帧的动画效果

详细

transition过渡效果

语法
transition: property duration timing-function delay;

值	描述
property	css属性的名称
duration	多长时间完成
timing-function	转速曲线
delay	效果开始的时候

animation动画效果

语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;

值	描述
name	定义的名称
duration	多长时间完成
delay	开始前多长的延迟
iteration-count	播放几次
direction	指定是否应该轮流反向播放动画
fill-mode	结束的状态
play-state	指定动画是否正在运行或已暂停