过渡

transition: 过渡属性 过渡时长 过渡曲线 延迟时间;

• 作用：

  • 有一种形态变化到另一种形态的过程

  • 让元素的样式慢慢变化，常配合hover使用，增强网页交互体验。

    参数	取值
    过渡的属性	all：所有能过渡的属性都过渡 具体的属性名：如width，只有width有过渡
    过渡的时长	数字+ s（秒）
    过渡曲线	ease逐渐变慢（默认值） ease-in 加速 ease-out 减速 linear 匀速 ease-in-out 先加再减
    延迟时间	数字+ s（秒），默认0秒

• 注意：

  • 过渡需要：默认状态和hover状态样式不同，才能有过渡效果
  • transition属性给需要过渡的元素本身添加
  • transition属性设置在不同的状态中，效果不同
    • 给默认状态设置，鼠标移入移出都有过渡效果
    • 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果
  • 不可以过渡显示和隐藏（display: none; display: block;）