持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第21天，点击查看活动详情
认识transition动画
1.什么是transition动画呢?
css transitions提供了一种在更改CSS属性时控制动画速度的方法。
可以让css属性变化成为一个持续一段时间的过程，而不是立即生效的;
比如将一个元素从一个位置移动到另外一个位置，默认在修改完CSS属性后会立即生效;
但是我们可以通过CSS transition，让这个过程加上一定的动画效果，包括一定的曲线速率变化;
通常将两个状态之间的过渡称为隐式过渡（implicit transitions)，因为开始与结束之间的状态由浏览器决定。
css transitions可以决定
哪些属性发生动画效果(明确地列出这些属性)
何时开始(设置delay)
持续多久(设置duration)
如何动画(定义timing function，比如匀速地或先快后慢)。
哪些CSS属性可以做动画呢?
并非所有的CSS属性都可以执行动画的，那么我们如何知道哪些属性支持动画呢?
方法一:在MDN可执行动画的CSS属性中查询
developer.mozilla.org/zh-CN/docs/…
方法二:阅读CSS属性的文档说明
2.过渡动画- transition
transition CSS属性是transition-property,transition-duration，transition-timing-function和transition-delay的一个简写属性。
transition-property:指定应用过渡属性的名称
all:所有属性都执行动画;
none:所有属性都不执行动画;
CSS属性名称:要执行动画的CSS属性名称，比如width、left、transform等;
transition-duration:指定过渡动画所需的时间
单位可以是秒(s）或毫秒(ms)
transition-timing-function:指定动画的变化曲线
developer.mozilla.org/zh-CN/docs/…
transition-delay:指定过渡动画执行之前的等待时间
