一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第24天，点击查看活动详情。

前言

之前2篇文章，我们讲了css3的动画属性（animation）和转换属性（transform），今天咱们再来看看css3跟动画有关联的属性，过渡属性（transition）。

transition

过渡属性是把设置的css属性值，慢慢过渡到另外设置的属性值。

比如你在一个按钮点击做元素显示隐藏操作，如果没有加过渡属性，那么你可以看到显示隐藏会转变的很快，有点突兀。

但是如果加了过渡属性，你可以看到从显示到隐藏，或者从隐藏到显示，会有个过渡效果，这样体验会好一点。

  <style>
    .box {
      margin: 100px;
    }

    .transition {
      margin-top: 10px;
      width: 100px;
      height: 100px;
      border: 1px solid red;
      background-color: skyblue;
      transition: opacity 1s ease 0s;
    }
  </style>
  <div class="box">
    <button>切换</button>
    <div class="transition"></div>
  </div>
  <script>
    const btn = document.querySelector('button')
    const transition = document.querySelector('.transition')
    // 默认设置显示
    transition.style.opacity = 1
    btn.addEventListener('click', () => {
      const opacity = Number(transition.style.opacity)
      transition.style.opacity = Number(!opacity)
    })
  </script>

属性详解

transition是一个简写属性，它本身包含以下属性：

transition-property
transition-duration
transition-timing-function
transition-delay

transition-property

这个是过渡的css属性的名称。比如width,opcaity，background等等。如果要过渡多个属性，则可以使用all。

transition-duration

这个是过渡的时长。要跟单位，可以是秒或者毫秒。默认是0，代表过渡时长为0，也就是没有过渡效果。

transition-timing-function

这个定义是过渡的速度。有以下值：

ease 先慢速，再加速，最后慢速结束。默认值。
linear 全程过渡的速度一样。
ease-in 过渡以慢速开始
ease-out 过渡以慢速结束
ease-in-out 过渡以慢速开始，慢速结束。

transition-delay

这个定义是过渡的延时，延时多少时间才执行过渡效果。要跟单位，可以是秒或者毫秒。默认是0。代表的是立即执行过渡。

例子

这个例子是在元素hover的时候会把字体的颜色，背景色，边框的颜色都改了，加上过渡效果。

  <style>
    .box {
      margin: 100px;
    }

    .transition {
      margin-top: 10px;
      width: 100px;
      height: 100px;
      color: darkorange;
      border: 3px solid pink;
      background-color: skyblue;
      transition: all 1s ease 0s;
    }

    .transition:hover {
      color: rebeccapurple;
      background-color: pink;
      border-color: skyblue;
    }
  </style>
  <div class="transition"></div>

css3的过渡属性（transition）

前言