transition 和 animation 区别

参考于：https://blog.csdn.net/XIAOZHUXMEN/article/details/52003135

            http://www.zhangxinxu.com/wordpress/2010/11/css3-transitions-transforms-animation-introduction/

            https://juejin.im/post/5afaea6b6fb9a07aa34a6a74?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com

transition 

单纯的代码不会触发任何过渡操作，需要通过用户的行为（如点击，悬浮等）触发，可触发的方式有： 

:hoever :focus :checked 媒体查询触发 JavaScript触发

局限性

transition的优点在于简单易用，但是它有几个很大的局限。 
（1）transition需要事件触发，所以没法在网页加载时自动发生。 
（2）transition是一次性的，不能重复发生，除非一再触发。 
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。 
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。 
CSS Animation就是为了解决这些问题而提出的。

animation

animation属性类似于transition，他们都是随着时间改变元素的属性值，其主要区别在于：transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果