【CSS】过渡属性

过渡

过渡transition

• 要发生过渡的css属性
  • 默认值all
  • transition-property: width, background-color
• 过渡的持续时间
  • s ms 1s=1000ms
  • 过度的持续时间必须写
  • 默认是0s
  • transition-duration: 4s
• 触发过渡的延迟时间
  • s ms 1s= 1000ms
  • transition-delay: 2s

<style>
    div {
      width: 500px;
      height: 400px;
      background-color: pink;
      /* 过渡 */
      /* 要发生过渡的css属性 */
      /* transition-property: width, background-color; */
      /* 过渡的持续时间 */
      transition-duration: 4s;
      /* 过渡的延迟时间 */
      /* transition-delay: 2s; */
    }
    div:hover {
      width: 600px;
      background-color: yellow;
    }
</style>

💡执行结果截图

过度的中间值

display：none和visibility：hidden不可用
原因：这两个是极端值，只有消失和出现两种状态，不能过度
解决：使用opcity：0 这个有中间值

<style>
    .baba {
      width: 400px;
      height: 500px;
      background-color: green;
      margin: 50px;
    }


    .son {
      width: 200px;
      height: 200px;
      background-color: blue;
      transition-duration: 2s;
    }

    .baba:hover .son {
      /* 是极端值 只有消失和出现两个状态 不能过渡 */
      /* display: none; */
      /* visibility: hidden; */


      /* 有中间值  */
      opacity: 0;
    }
  </style>
  <!-- 鼠标放到baba  son慢慢消失 -->
  <div class="baba">
    <div class="son"></div>
  </div>

💡执行结果截图

过度属性的运动状态

transition-timing-function
先块后慢
transition-timing-function：ease；

匀速
transition-timing-function：linear；

<style>
    .father {
      width: 800px;
      height: 300px;
      border: 1px solid #000;
      margin: 30px auto;
    }


    .father div {
      width: 100px;
      height: 100px;
      margin: 20px;
      background-color: pink;
      transition-duration: 2s;
    }


    .father:hover div {
      width: 500px;
    }


    .ease {
      /* 默认  先快后慢*/
      transition-timing-function: ease;
    }


    .linear {
      /* 匀速 */
      transition-timing-function: linear;
    }
  </style>

💡执行结果截图

小结:
过渡是主动触发的
一般过渡只有鼠标移入才有效
所以过渡属性要写在元素的默认状态中

过度的简写
transition：要发生过度的属性 持续的时间 延迟时间 运动状态

• 属性顺序不强调
• 持续时间和延迟时间有先后顺序 持续时间在前
• 持续时间必须写

最简单的过度写法
transition：2s