transition和animation的区别

一、transition 过渡属性
transition：css 属性名称 总时间 运动曲线 何时开始；
这种效果可以在鼠标点击，点击，获取焦点 或则对元素任
何改变中触发 并以动画效果改变CSS属性值。
动画执行的贝塞尔函数：
https://img-blog.csdn.net/20161214114558941?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2RkY2o=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

二、animation
@keyframes规则，用于创建动画，@keyframes规定css样式，创建由当前样式逐渐改为新样式的动画

注意事项：创建时需要绑定选择器，否则无效 当绑定选择器时会自动将动画添加给元素

三、区别
transition：强调过度；
需要触发一个事件，比如鼠标移上去，焦点，点击。

animation：多个关键帧 ，实现自由动画，动画需要创建动画规则；
不需要触发任何事件也可随时间变化达到一种动画效果；
与transition不同是animation可以通过@keyframe控制当前帧属性，更灵活。