过渡#

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

• 作用：

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

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

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

• 注意：

  • 过渡需要：默认状态和hover状态样式不同,才能有过渡效果

  • transition属性给需要过渡的元素本身添加

  • transition属性设置在不同的状态中,效果不同

    • 给默认状态设置,鼠标移入移出都有过渡效果
    • 给hover状态设置,鼠标移入有过渡效果,移出没有过渡效果

  • 不可以过渡显示和隐藏（display: none; display: block;）