transition和animation的区别

区别：

1. transition 是过渡，是样式值的变化的过程，只有开始和结束两帧；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；
2. animation 配合 @keyframe 可以不触发事件就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；
3. animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；
4. 在性能方面：我们在用使用 aniamtion 的时候这样就可以改变很多属性，像我们改变了 width、height、postion 等等这些改变文档流的属性的时候，会引起页面的回流和重绘，对性能影响就比较大，但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图，当然也就不会引起页面的重排了；

animation:

• 属于CSS属性
• animation基本用法是：

animation: donghua 3s ease 1s infinite normal forwards;
animation: name keeping-time animate-function delay times iteration final;

1. name：动画的名字；
2. keeping-time：整个动画的持续时间，必须带上时间单位，s或者ms均可；
3. animate-function：运动方式（动画方式）的贝赛尔曲线，可取值为：ease、ease-in、ease-out、linear、ease-in-out、cubic-bezier(num1,num2,num3,num4)；
4. delay：动画延迟执行的时间，单位也是s或者ms，值得注意的是，即使延迟时间为0，也必须加上时间单位，如果写成直接写成0，在Chrome和Safari(webkit)下是没问题的，但是在FF(gecko)下无效；
5. times：动画循环执行的次数，无单位，infinite为无限循环；
6. iteration：如果动画循环，循环的方式是：alternate(偶数次向前播放，奇数次向后播放)、normal(每次都向前播放)；
7. final：动画的最后（达到100%）时的状态，取值有：backward（回到初始状态）、forwards（停在最终状态）、none、both。

• 每个参数也可以单独写，最后用的时候记得加浏览器前缀：

.classname{
    -webkit-animation:name 6s linear 0ms infinite normal forwards;
    -moz-animation:name 6s linear 0ms infinite normal forwards;
    -o-animation:name 6s linear 0ms infinite normal forwards;
    animation:name 6s linear 0ms infinite normal forwards;
}

transition:

• 元素属性发生变化时会发生瞬间变化的效果，而transition就可以让这个过程变得缓慢，产生动画的效果。
• 也属于CSS属性

transition: opacity 1s linear;
transition: transition-property transition-duration transition-timing-function；

1. transition-property：什么属性将用动画表现，例如, opacity。
2. transition-duration：转变过程持续时间。
3. transition-timing-function：转变时使用的调速函数(比如, linear、 ease-in 或自定义的 cubic bezier 函数)。

• 举例：

div {
  opacity: 1;
  transition: opacity 1s linear;
}

div:hover {
  opacity: 0;
}

【animation 和 transition 的区别 - mufengchun - 博客园】https://www.cnblogs.com/mufc/p/11468742.html

【CSS动画：transition的用法介绍】

https://www.webhek.com/post/css-animation-transition.html