CSS过渡

前端
CSS
作者

yangjh

发布日期

October 30, 2021

CSS3 的一个革新之处，是可以实现过渡及动画，前端开发人员现在可以不借助于 Flash 或者 JavaScript，仅通过 HTML 和 CSS 就实现动画效果。

通过CSS3 过渡和动画，我们可以在特定事件发生时，改变元素的外观。CSS3 动画还可以设定多个关键帧。这样实现不同状态之间的变化。

过渡

若要过渡生效，元素必须在状态上有所改变，并且为不同的状态分配两个不同的样式。最简单的改变状态的方式就是使用：hover、 :focus、 :active 和 :target 伪类。和过渡相关的属性有四个，分别是 transition-property、transition-duration、transition-timing-function 和 transition-delay。创建一个过渡，并不需要以上四个属性，前三个是使用得最多的。

下面是个过渡效果的例子：

.box {
  background: #2db34a;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
}
.box:hover {
  background: #ff7b29;
}

上述例子中，当鼠标移动到矩形之上时，矩形的背景色会在 1 秒之内发生变化。案例

过渡属性

transition-property 属性决定元素的哪些属性会发生过渡变化。默认情况下，不同状态之间的所有不同值的属性都会有过渡变化效果。但我们可以通过 transition-property 属性来具体指定需要有过渡效果的属性。比如，上述的例子中，我们指定了背景 background 作为唯一的过渡效果属性。

可以指定多个属性作为过渡效果，多个属性之间用逗号隔开。例如：

.box {
    background: #2db34a;
    border-radius: 6px
    transition-property: background, border-radius;
    transition-duration: 1s;
    transition-timing-function: linear;
  }
  .box:hover {
    background: #ff7b29;
    border-radius: 50%;
  }

上例中，元素会同时在背景色和圆角效果上产生过渡。

非常重要的一点是，并非所有的属性都可以用在过渡效果上，只有那些拥有确定中值的属性才可以用在过渡效果。例如颜色、字体大小等等，但如 display 属性，就不能用在过渡效果上。常用的可以用在过渡效果的属性有：

  1. background-color
  2. background-position
  3. border-color
  4. border-width
  5. border-spacing
  6. bottom
  7. clip
  8. color
  9. crop
  10. font-size
  11. font-weight
  12. height
  13. left
  14. letter-spacing
  15. line-height
  16. margin
  17. max-height
  18. max-width
  19. min-height
  20. min-width
  21. opacity
  22. outline-color
  23. outline-offset
  24. outline-width
  25. padding
  26. right
  27. text-indent
  28. text-shadow
  29. top
  30. vertical-align
  31. visibility
  32. width
  33. word-spacing
  34. z-index

过渡效果持续时间

Transition-duration 属性用来指定过渡效果的持续时间，其单位可以是秒 s，也可是毫秒 ms，既可以整数，也可以是小数。

当指定了多个过渡属性时，CSS3 还可分别为多个过渡效果指定持续时间。例如：

.box {
  background: #2db34a;
  border-radius: 6px;
  transition-property: background, border-radius;
  transition-duration: .2s, 1s;
  transition-timing-function: linear;
}
.box:hover {
  background: #ff7b29;
  border-radius: 50%;
}

上例中，背景色的过渡会在 0.2 秒之内完成，而圆角效果的过渡会在 1 秒之内完成。

过渡的缓动效果设置

Transition-timing-function 属性用来设定过渡效果的变化速度。主要值有：linear、 ease-in、 ease-out 和 ease-in-out。

linear 值表示变化的时候以恒定的速度进行过渡。ease-in 表示过渡的时候，先慢后快，而 ease-out 表示先快后慢，ease-in-out 表示开始慢，中间快，结束前有缓速的过渡。缓动效果还可参考网站 cubic-bezier Builder 自行定义，

当有多个过渡属性时，我们可以分别其指定过渡速度设置，也是用逗号隔开。

过渡效果的延迟设置

transition-delay 属性用来指定过渡效果在多久之后发生，其单位也是时间单位。这一属性的用法和上述属性类似，不再赘述。

过渡效果的简写

过渡效果的设置，和背景、字体等属性一样，也可以简写，使用 transition 属性，依次设置 transition-property、 transition-duration、 transition-timing-function 以及 transition-delay。不同的属性时间用空格隔开，多个过渡效果之间用逗号隔开。例如：

.box {
  background: #2db34a;
  border-radius: 6px;
  transition: background .2s linear, border-radius 1s ease-in 1s;
}
.box:hover {
  color: #ff7b29;
  border-radius: 50%;
}

上例中，背景色在 0.2 秒之内匀速过渡，而圆角效果在 1 秒之后，先慢后快地在 1 秒内完成过渡。

变形和过渡的结合

下面，我们将变形和过渡结合起来，实现图片翻转的动画效果。其中，HTML 部分：

<div class="card-container">
    <div class="card">
        <div class="side"><img src="https://img1.doubanio.com/view/photo/photo/public/p2329615548.jpg" alt="海拉尔的冬"></div>
        <div class="side back">海拉尔的冬</div>
    </div>
</div>

CSS 部分：

.card-container {
    cursor: pointer;
    height: 150px;
    perspective: 200;
    position: relative;
    width: 150px;
}

.card {
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: all 1s ease-in-out;
    width: 100%;
}

.card:hover {
    transform: rotateY(180deg);
}

.side {
    backface-visibility: hidden;
    border-radius: 6px;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
}

.back {
    background: #eaeaed;
    color: #0087cc;
    line-height: 150px;
    text-align: center;
    transform: rotateY(180deg);
}

其中用到了绝对定位，使得图片和文字处于相同容器的相同位置，而图片背部的描述文字，通过绕 Y 轴旋转 180 度后，再旋转过来之后，就实现文字的正常显示。

回到顶部