过渡属性-transition

/* 定义通用的过渡效果 */
.transition {
  transition: all 0.3s ease; 
}

1. 过渡元素

all

默认设置就行，如果需要针对宽度 就是width等；

2. 过渡时间

0.3s

默认的时长

3. 过渡效果

1. ease
   默认效果：先慢→快→最后慢，最柔和、最常用，日常全部元素首选。
2. linear
   匀速变化：从头到尾速度一样，很生硬，几乎不用。
3. ease-in
   先慢后快：开始慢悠悠，后面越来越快。
4. ease-out
   先快后慢：开头很快，结尾慢慢停下，悬浮动效很常用。
5. ease-in-out
   开头慢 + 中间快 + 结尾慢，比 ease 更顺滑、高级一点。