transition和animation的区别

两者的区别，触发条件不一样

transition一般通过hover和事件等触发，而animation 是立即触发

1. animation可以设定循环次数
2. animation可以很灵活的控制动画
   过度transition可以实现简单的动画交互效果
   过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果

transition-property: 过渡属性(默认值为all)
transition-duration: 过渡持续时间(默认值为0s)
transiton-timing-function: 过渡函数(默认值为ease函数)
transition-delay: 过渡延迟时间(默认值为0s)

1、下面面transition:width 2s定义在类名属性中，触发鼠标悬浮时，会触发元素的过渡动画效果，鼠标离开时，也会触发元素的过渡效果

2.animation是配合动画过渡效果，可以精细调整过渡动画的效果