CSS过渡

想要实现过渡，要明确两件事

1. 要添加效果的CSS属性
2. 效果持续的时长
   如果没有规定持续的时长则不会有过渡效果，因为默认值是0
   当光标从元素上离开时，会立刻变为原始样式

transition-property：规定过渡效果所针对的 CSS 属性的名称
transition-duration：过渡说需要的时间
transition-timing-function：过渡效果
transition-delay：延迟过渡
transition：过渡简写

transition-property属性（规定过渡效果所针对的 CSS 属性的名称）

div{
  transition-property:width;
}

transition-duration属性（过渡所需要的时间）

div{
  transition-duration:1s;
}

transition-timing-function属性（过渡时的效果）

• ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
• linear - 规定从开始到结束具有相同速度的过渡效果
• ease-in -规定缓慢开始的过渡效果
• ease-out - 规定缓慢结束的过渡效果
• ease-in-out - 规定开始和结束较慢的过渡效果
• cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

transition-delay属性（延迟过渡效果）

在过渡启动前有一秒的延迟

div{
  transition-delay:1s;
}

transition属性（过渡简写）

div{
  /*过渡的属性 过渡时间 过渡效果 延迟过渡*/
  transition:width 1s linear 0.5s;
}