CSS transition 过渡动画

最新推荐文章于 2026-04-13 22:41:00 发布

原创最新推荐文章于 2026-04-13 22:41:00 发布 · 695 阅读

·

4

·

本内容遵循CC 4.0 BY-SA版权协议

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

收录于

CSS

目录

transition 属性详解

1. transition-property（过渡属性）

2. transition-duration（过渡持续时间）

3. transition-timing-function（时间函数）

4. transition-delay（过渡延迟）

触发过渡的常见方式

1. 伪类触发

2. JavaScript 触发

实际应用示例

1. 基础过渡效果示例

2. 高级过渡效果示例

3. 实用过渡效果集合

CSS Transition 提供了一种在更改CSS属性时控制动画速度的方法，让属性变化成为持续过程而非立即生效，让元素的不同状态之间创建平滑的过渡效果。例如元素位移时，默认修改CSS属性会立即生效，但使用transition可以让移动过程产生动画效果。

CSS Transition 动画的缺点：

状态限制：只能定义开始和结束两个状态，无法定义中间过渡状态。例如元素从位置A移动到位置B，不能指定经过位置C，transition无法实现，需使用animation
触发条件：过渡属性只有发生变化才会触发动画效果
重复执行：默认不能自动重复执行，除非反复触发，（如不断hover）。无法设置“执行100次”等参数。

基本语法

transition: property duration timing-function delay;

transition 属性详解

1. transition-property（过渡属性）

指定要应用过渡效果的 CSS 属性：

.element {
  /* 单个属性 */
  transition-property: color;
  
  /* 多个属性 */
  transition-property: color,left, background-color, transform;
  
  /* 所有属性 */
  transition-property: all;
  
  /* 无属性 */
  transition-property: none;
}

注意：left默认值为auto，不能直接用于动画，必须显式设置初始值，如left:0;原因是auto值无法计算过渡状态。

2. transition-duration（过渡持续时间）

指定过渡效果的持续时间：

.element {
  /* 单个持续时间 */
  transition-duration: 0.3s;
  
  /* 多个持续时间（对应多个属性） */
  transition-duration: 0.3s, 0.5s, 1s;
  
  /* 其他单位 */
  transition-duration: 300ms; /* 毫秒 */
  transition-duration: 0.5s;   /* 秒 */
}

3. transition-timing-function（时间函数）

控制过渡的速度曲线：

.element {
  /* 预定义的时间函数 */
  transition-timing-function: ease;        /* 默认：慢-快-慢 */
  transition-timing-function: linear;      /* 匀速 */
  transition-timing-function: ease-in;     /* 慢开始 */
  transition-timing-function: ease-out;    /* 慢结束 */
  transition-timing-function: ease-in-out; /* 慢开始和结束 */
  
  /* 自定义贝塞尔曲线 */
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
  
  /* 步进函数 */
  transition-timing-function: steps(4, end);
}

4. transition-delay（过渡延迟）

指定过渡效果开始前的延迟时间：

.element {
  /* 延迟0.5秒开始过渡 */
  transition-delay: 0.5s;
  
  /* 多个延迟时间 */
  transition-delay: 0.1s, 0.3s, 0.5s;
}

简写语法

.element {
  /* 完整简写 */
  transition: all 0.3s ease 0s;
  
  /* 常用简写 */
  transition: color 0.3s;
  transition: transform 0.5s ease-in-out;
  transition: background-color 0.2s linear 0.1s;
}

触发过渡的常见方式

1. 伪类触发

.button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

2. JavaScript 触发

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 0.5s ease;
}

.box.moved {
  transform: translateX(200px) rotate(180deg);
  background-color: blue;
}

document.querySelector('.box').addEventListener('click', function() {
  this.classList.toggle('moved');
});

实际应用示例

1. 基础过渡效果示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Transition 基础示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background-color: #f5f5f5;
    }

    .container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .card {
      background: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      transition: all 0.3s ease;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

    /* 颜色过渡 */
    .color-transition {
      background-color: #3498db;
      color: white;
      padding: 15px;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .color-transition:hover {
      background-color: #e74c3c;
    }

    /* 尺寸过渡 */
    .size-transition {
      width: 100px;
      height: 100px;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      margin: 20px auto;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .size-transition:hover {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      transform: rotate(45deg);
    }

    /* 旋转过渡 */
    .rotate-transition {
      width: 80px;
      height: 80px;
      background-color: #9b59b6;
      margin: 20px auto;
      cursor: pointer;
      transition: transform 0.5s ease-in-out;
    }

    .rotate-transition:hover {
      transform: rotate(360deg);
    }

    /* 多属性过渡 */
    .multi-transition {
      padding: 20px;
      background-color: #2c3e50;
      color: white;
      border-radius: 4px;
      cursor: pointer;
      transition: 
        background-color 0.3s ease,
        color 0.3s ease,
        transform 0.2s ease,
        box-shadow 0.3s ease;
    }

    .multi-transition:hover {
      background-color: #ecf0f1;
      color: #2c3e50;
      transform: scale(1.05);
      box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    }

    h2 {
      margin-bottom: 15px;
      color: #333;
    }

    p {
      line-height: 1.6;
      color: #666;
    }
  </style>
</head>
<body>
  <h1 style="text-align: center; color: #333; margin-bottom: 30px;">CSS Transition 过渡效果示例</h1>
  
  <div class="container">
    <div class="card">
      <h2>卡片悬停效果</h2>
      <p>鼠标悬停时卡片会上升并增加阴影效果</p>
      <div class="color-transition">颜色过渡效果</div>
    </div>
    <div class="card">
      <h2>尺寸变化过渡</h2>
      <p>点击或悬停查看尺寸和形状的变化</p>
      <div class="size-transition"></div>
    </div>
    <div class="card">
      <h2>旋转过渡</h2>
      <p>鼠标悬停时元素会旋转360度</p>
      <div class="rotate-transition"></div>
    </div>
    <div class="card">
      <h2>多属性过渡</h2>
      <p>同时过渡多个CSS属性</p>
      <div class="multi-transition">
        <p>悬停查看多种效果</p>
      </div>
    </div>
  </div>
</body>
</html>

2. 高级过渡效果示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>高级 CSS Transition 效果</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      margin: 0;
      padding: 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
    }

    .container {
      max-width: 1000px;
      margin: 0 auto;
    }

    h1 {
      text-align: center;
      color: white;
      margin-bottom: 40px;
      font-size: 2.5em;
    }

    /* 不同的时间函数示例 */
    .timing-demo {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      margin-bottom: 40px;
    }

    .timing-item {
      background: white;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
      cursor: pointer;
    }

    .ease-item {
      transition: all 0.6s ease;
    }

    .linear-item {
      transition: all 0.6s linear;
    }

    .ease-in-item {
      transition: all 0.6s ease-in;
    }

    .ease-out-item {
      transition: all 0.6s ease-out;
    }

    .ease-in-out-item {
      transition: all 0.6s ease-in-out;
    }

    .custom-bezier-item {
      transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .timing-item:hover {
      transform: translateY(-20px) scale(1.1);
      background: #ff6b6b;
      color: white;
    }

    /* 延迟过渡示例 */
    .delay-demo {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-bottom: 40px;
      flex-wrap: wrap;
    }

    .delay-item {
      width: 60px;
      height: 60px;
      background: #4ecdc4;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .delay-item:nth-child(1) { transition-delay: 0s; }
    .delay-item:nth-child(2) { transition-delay: 0.1s; }
    .delay-item:nth-child(3) { transition-delay: 0.2s; }
    .delay-item:nth-child(4) { transition-delay: 0.3s; }
    .delay-item:nth-child(5) { transition-delay: 0.4s; }
    .delay-item:nth-child(6) { transition-delay: 0.5s; }

    .delay-item:hover {
      transform: translateY(-30px);
      background: #ff6b6b;
    }

    /* 加载动画示例 */
    .loading-demo {
      text-align: center;
      margin-bottom: 40px;
    }

    .loading-text {
      font-size: 24px;
      color: white;
      margin-bottom: 20px;
    }

    .loading-dots {
      display: flex;
      justify-content: center;
      gap: 10px;
    }

    .dot {
      width: 20px;
      height: 20px;
      background: white;
      border-radius: 50%;
      animation: bounce 1.5s infinite;
    }

    .dot:nth-child(1) { animation-delay: 0s; }
    .dot:nth-child(2) { animation-delay: 0.1s; }
    .dot:nth-child(3) { animation-delay: 0.2s; }
    .dot:nth-child(4) { animation-delay: 0.3s; }
    .dot:nth-child(5) { animation-delay: 0.4s; }

    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-20px); }
    }

    /* 按钮交互效果 */
    .button-demo {
      text-align: center;
      margin-bottom: 40px;
    }

    .fancy-button {
      padding: 15px 30px;
      font-size: 18px;
      background: transparent;
      color: white;
      border: 2px solid white;
      border-radius: 30px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .fancy-button::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: all 0.6s ease;
    }

    .fancy-button:hover {
      background: white;
      color: #667eea;
      transform: translateY(-3px);
      box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    }

    .fancy-button:hover::before {
      left: 100%;
    }

    .fancy-button:active {
      transform: translateY(-1px);
    }

    h2 {
      color: white;
      text-align: center;
      margin-bottom: 20px;
      font-size: 1.8em;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>CSS Transition 高级效果</h1>
    <h2>不同时间函数效果</h2>
    <div class="timing-demo">
      <div class="timing-item ease-item">
        <h3>ease</h3>
        <p>慢-快-慢</p>
      </div>
      <div class="timing-item linear-item">
        <h3>linear</h3>
        <p>匀速</p>
      </div>
      <div class="timing-item ease-in-item">
        <h3>ease-in</h3>
        <p>慢开始</p>
      </div>
      <div class="timing-item ease-out-item">
        <h3>ease-out</h3>
        <p>慢结束</p>
      </div>
      <div class="timing-item ease-in-out-item">
        <h3>ease-in-out</h3>
        <p>慢开始结束</p>
      </div>
      <div class="timing-item custom-bezier-item">
        <h3>自定义贝塞尔</h3>
        <p>弹性效果</p>
      </div>
    </div>
    <h2>延迟过渡效果</h2>
    <div class="delay-demo">
      <div class="delay-item"></div>
      <div class="delay-item"></div>
      <div class="delay-item"></div>
      <div class="delay-item"></div>
      <div class="delay-item"></div>
      <div class="delay-item"></div>
    </div>
    <h2>加载动画</h2>
    <div class="loading-demo">
      <div class="loading-text">加载中...</div>
      <div class="loading-dots">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
      </div>
    </div>
    <h2>按钮交互效果</h2>
    <div class="button-demo">
      <button class="fancy-button">悬停查看效果</button>
    </div>
  </div>
</body>
</html>

3. 实用过渡效果集合

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>实用 CSS Transition 效果</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', T发生异常，可以输入更多信息再让我来回答或重试

标签

#css #前端

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。