参考于：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属性，达到一种动画的效果