transition和transform结合实现平滑动画效果

最新推荐文章于 2025-03-22 14:25:11 发布

guokanglun

最新推荐文章于 2025-03-22 14:25:11 发布

阅读量1.4k

点赞数 19

分类专栏： DIV + CSS 文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/gklcsdn/article/details/143736031

版权

DIV + CSS 专栏收录该内容

12 篇文章

订阅专栏

在CSS中，transition和transform可以结合使用，通过过渡效果来控制元素从一种状态平滑地变到另一种状态。transform用于对元素进行变换，比如旋转、缩放、平移等；transition则用于设置这些变换的过渡效果，比如持续时间、延迟等，使变换显得更自然和流畅。

一、`transform`属性

transform属性可以对元素进行二维或三维的视觉变换。常用的变换包括：

translate(x, y)：将元素在水平方向（x）和垂直方向（y）上移动指定的距离。
scale(x, y)：缩放元素，x和y分别表示水平和垂直方向的缩放比例。值为1表示不变，0.5表示缩小为原来的一半，2表示放大一倍。
rotate(angle)：将元素旋转指定的角度，angle为旋转角度，可以使用deg表示，比如rotate(45deg)表示旋转45度。
skew(x-angle, y-angle)：将元素在x轴或y轴上倾斜指定的角度。一般用于创建斜切效果。

示例：基础变换效果

在未加入transition之前，我们可以先看看transform的直接应用效果：

<style>
  .box {
      width: 100px;
      height: 100px;
      background-color: coral;
      /* 初始位置和大小 */
  }
  /* 鼠标悬停时应用的变换效果 */
  .box:hover {
      transform: scale(1.5) rotate(45deg) translateX(30px); /* 缩放1.5倍，旋转45度，右移30px */
  }
</style>

<div class="box"></div>

结果

直接使用transform可以看到立即生效的变化，但如果没有transition，这些变化会瞬间完成，不会有平滑的过渡效果。这时，加入transition属性可以让这些效果更加平滑。

二、`transition`属性

transition属性用于定义当元素从一种状态变化到另一种状态时，这些变化的过渡效果，包括变化的持续时间、延迟和缓动函数等。它的主要参数有：

transition-property：指定需要过渡效果的CSS属性，比如transform、opacity、width等。
transition-duration：指定过渡效果的持续时间，比如0.5s表示0.5秒。
transition-timing-function：定义过渡的缓动效果（或称“速率曲线”）。常用的选项包括：
- ease：由慢到快，再到慢，默认值。
- linear：匀速过渡。
- ease-in：由慢到快。
- ease-out：由快到慢。
- cubic-bezier(n, n, n, n)：自定义过渡曲线，可以通过贝塞尔曲线指定详细的速率变化。
transition-delay：设置过渡效果的延迟时间，表示开始前的等待时间。

三、结合`transform`和`transition`使用

结合transition和transform，可以为元素的变换效果设置平滑过渡，让变化看起来更加自然。以下是一个综合的例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition和Transform结合使用</title>
<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: coral;
        /* 添加过渡效果，应用在transform属性上 */
        transition: transform 1s ease-in-out 0.2s; /* 持续1秒，缓动效果为ease-in-out，延迟0.2秒 */
    }
    /* 鼠标悬停时的变换效果 */
    .box:hover {
        transform: scale(1.5) rotate(45deg) translateX(50px); /* 放大1.5倍，旋转45度，并右移50px */
    }
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

代码解析

transition: transform 1s ease-in-out 0.2s;
- transform：指定transform属性的变化具有过渡效果。
- 1s：变化的持续时间为1秒。
- ease-in-out：缓动效果，开始和结束时都比较慢，中间速度快。
- 0.2s：变化开始前等待0.2秒（延迟）。
.box:hover { transform: ... }
- 当鼠标悬停在.box上时，触发transform变化：元素放大1.5倍、旋转45度，并向右移动50像素。
- 由于设置了transition，这些变化会在1秒内平滑完成，而不是立即变化。

四、其他复杂的组合示例

1. 多个过渡效果组合

同时对多个CSS属性设置过渡效果，比如在悬停时改变背景色和位置：

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: coral;
        transition: transform 0.7s ease, background-color 0.5s linear;
    }
    .box:hover {
        transform: translateY(20px) scale(1.2); /* 向下移动20px，放大1.2倍 */
        background-color: lightblue; /* 改变背景色 */
    }
</style>

在此例中，transform的过渡持续时间为0.7s，而background-color的过渡持续时间为0.5s，两个过渡效果会独立生效。

2. `cubic-bezier`自定义过渡

使用cubic-bezier创建一个自定义的过渡速率：

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: coral;
        transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* 自定义贝塞尔曲线 */
    }
    .box:hover {
        transform: scale(1.3); /* 缩放 */
    }
</style>

cubic-bezier(0.68, -0.55, 0.27, 1.55)曲线让元素在悬停时加速缩放，带有弹跳效果。

3. 应用在3D效果中的组合

在结合perspective属性时，transform还能实现3D效果：

<style>
    .box-container {
        perspective: 800px; /* 设定3D视角 */
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: coral;
        transition: transform 1s;
    }
    .box:hover {
        transform: rotateY(180deg); /* 水平旋转180度 */
    }
</style>

<div class="box-container">
    <div class="box"></div>
</div>