请问老师animation和transition啥区别

同学你好，对于你的问题解答如下：

1. animation和transition的作用如下：

   （1）　animation 可以用 name 设置动画的名称，用 duration 设置动画完成的周期，用 timing-function 设置动画的速度曲线，delay 设置动画什么时候开始，iteration-count 设置动画播放的次数，direction 规定下一个周期是否逆向的播放，play-state 动画是否正在进行或者暂停，fill-mode 设置动画停了之后位置什么状态

   （2）transition 用 property 去设置过渡效果的属性名称，duration 设置过渡效果的周期，timing-function 规定速度效果的速度曲线，delay 设定过渡效果什么时候开始；

2. 两者的区别如下：

   （1）transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；

   （2）animation 配合 @keyframe 可以不触发时间就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；

   （3）animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~