当前位置：首页 > 资讯 > 系统环境

CSS3动画详细教程

时间：2025-11-27 17:48 作者：来源：阅读：8
扫一扫，手机访问

摘要：CSS3 动画是实现元素动态效果的核心特性，无需 JavaScript 即可完成平滑过渡、循环运动、多关键帧动画等效果，具有性能优、兼容性好（支持 IE10+ 及所有现代浏览器）的特点。本教程从基础概念到高级技巧，全面覆盖 CSS3 动画的使用场景和实现方法。一、基础 1、transform 属性 transform是 CSS3 中用于改变元素形状、位置和大小的属性，它允许你对元素进行旋转

CSS3 动画是实现元素动态效果的核心特性，无需 JavaScript 即可完成平滑过渡、循环运动、多关键帧动画等效果，具有性能优、兼容性好（支持 IE10+ 及所有现代浏览器）的特点。本教程从基础概念到高级技巧，全面覆盖 CSS3 动画的使用场景和实现方法。

一、基础

1、transform 属性

transform是 CSS3 中用于改变元素形状、位置和大小的属性，它允许你对元素进行旋转、缩放、倾斜和移动等变换操作，而不会影响文档的正常流布局。

核心特点：

不影响其他元素的布局位置；可以通过 transition或 animation创建平滑的变换效果；可以使用 transform-origin设置变换的原点；支持 2D 和 3D 变换。

2、2D 转换方法

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

3、3D 转换方法

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

二、Transition（过渡动画）

基本概念

Transition 用于在元素从一种样式转变为另一种样式时添加平滑的过渡效果，必须触发事件（如:hover、:active、类名切换等）。

语法结构



.element {
  /* 单个属性过渡 */
  transition: property duration timing-function delay;
  
  /* 多个属性过渡 */
  transition: property1 duration timing-function,
              property2 duration timing-function;
  
  /* 所有属性过渡 */
  transition: all duration timing-function delay;
}

完整示例



<!DOCTYPE html>
<html>
<head>
<style>
.transition-demo {
  width: 100px;
  height: 100px;
  background: #3498db;
  margin: 50px auto;
  
  /* 过渡设置 */
  transition: 
    width 0.5s ease-in-out,
    height 0.5s ease-in-out 0.1s,
    background-color 0.3s linear,
    border-radius 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
 
.transition-demo:hover {
  width: 200px;
  height: 200px;
  background-color: #e74c3c;
  border-radius: 50%;
}
</style>
</head>
<body>
  <div class="transition-demo"></div>
</body>
</html>

Transition 的特点

✅ 简单易用，适合简单状态变化✅ 性能较好（当使用 transform 和 opacity 时）❌ 只能定义开始和结束状态❌ 需要触发事件

二、Animation（关键帧动画）

Animation（关键帧动画）的核心是 @keyframes 关键帧和动画属性：

关键帧（@keyframes）：定义动画的「关键状态」，指定元素在不同时间点的样式（如位置、颜色、尺寸等）。

动画属性：绑定关键帧到元素，并控制动画的时长、速度曲线、循环次数等行为（如 animation-name、animation-duration 等）。

1、基础使用步骤

实现 CSS3 动画只需 3 步：

定义 @keyframes 关键帧（动画蓝图）；在目标元素上绑定关键帧；配置动画属性（控制动画行为）。

步骤 1：定义 @keyframes 关键帧

关键帧通过 @keyframes 动画名称 { ... } 定义，支持两种语法：

百分比语法：用 0%（动画开始）、50%（动画中间）、100%（动画结束）等百分比指定关键状态；from/to 语法：简化版，from 等价于 0%，to 等价于 100%。

示例：简单位移动画



/* 定义关键帧：名为 move 的动画 */
@keyframes move {
  /* 动画开始（0%）：初始位置 */
  0% {
    transform: translateX(0); /* X 轴位移 0 */
    background: red;
  }
  /* 动画中间（50%）：过渡状态 */
  50% {
    transform: translateX(300px) translateY(100px); /* 斜向位移 */
    background: yellow;
  }
  /* 动画结束（100%）：最终位置 */
  100% {
    transform: translateX(600px); /* X 轴位移 600px */
    background: blue;
  }
}
 
/* 简化版（from/to）：仅需开始和结束状态 */
@keyframes fadeIn {
  from { opacity: 0; } /* 初始透明 */
  to { opacity: 1; }   /* 最终不透明 */
}

步骤 2：绑定动画到元素

在目标元素的 CSS 中，通过 animation-name 指定要使用的关键帧名称，同时配置必要的动画属性（至少指定 animation-duration 动画时长，否则默认 0 不会执行）。

示例：元素应用动画



.box {
  width: 100px;
  height: 100px;
  background: red;
 
  /* 1. 绑定关键帧（必须） */
  animation-name: move;
  /* 2. 动画时长（必须，单位 s/ms） */
  animation-duration: 3s;
  /* 3. 动画速度曲线（默认 ease：慢-快-慢） */
  animation-timing-function: ease;
  /* 4. 延迟执行时间（默认 0，单位 s/ms） */
  animation-delay: 0.5s;
  /* 5. 循环次数（默认 1，infinite 表示无限循环） */
  animation-iteration-count: infinite;
  /* 6. 动画方向（默认 normal：正向；alternate：正反交替） */
  animation-direction: alternate;
  /* 7. 动画结束后状态（默认 none：回到初始；forwards：保持结束状态） */
  animation-fill-mode: forwards;
  /* 8. 动画播放状态（默认 running：播放；paused：暂停） */
  animation-play-state: running;
}

完整代码



    <div class="box">
        123
    </div>
 
    <style>
        .box {
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }
 
        /* 定义关键帧：名为 move 的动画 */
        @keyframes move {
 
            /* 动画开始（0%）：初始位置 */
            0% {
                transform: translateX(0);
                /* X 轴位移 0 */
                background: red;
            }
 
            /* 动画中间（50%）：过渡状态 */
            50% {
                transform: translateX(300px) translateY(100px);
                /* 斜向位移 */
                background: yellow;
            }
 
            /* 动画结束（100%）：最终位置 */
            100% {
                transform: translateX(600px);
                /* X 轴位移 600px */
                background: blue;
            }
        }
 
        .box {
            width: 100px;
            height: 100px;
            background: red;
 
            /* 1. 绑定关键帧（必须） */
            animation-name: move;
            /* 2. 动画时长（必须，单位 s/ms） */
            animation-duration: 3s;
            /* 3. 动画速度曲线（默认 ease：慢-快-慢） */
            animation-timing-function: ease;
            /* 4. 延迟执行时间（默认 0，单位 s/ms） */
            animation-delay: 0.5s;
            /* 5. 循环次数（默认 1，infinite 表示无限循环） */
            animation-iteration-count: infinite;
            /* 6. 动画方向（默认 normal：正向；alternate：正反交替） */
            animation-direction: alternate;
            /* 7. 动画结束后状态（默认 none：回到初始；forwards：保持结束状态） */
            animation-fill-mode: forwards;
            /* 8. 动画播放状态（默认 running：播放；paused：暂停） */
            animation-play-state: running;
        }
    </style>

2、核心动画属性详解

简写属性：animation

为简化代码，可使用 animation 简写属性，顺序为：

属性名	作用	可选值	默认值
`animation-name`	指定绑定的关键帧名称	自定义关键帧名称（如 move）、`none`（取消动画）	none
`animation-duration`	动画总时长	数值 + 单位（`s` 秒 / `ms` 毫秒，如 `3s`、`500ms`）	0s
`animation-timing-function`	动画速度曲线（缓动效果）	`ease`（慢 - 快 - 慢）、`linear`（匀速）、`ease-in`（慢进）、`ease-out`（慢出）、`ease-in-out`（慢进慢出）、`cubic-bezier(n,n,n,n)`（自定义贝塞尔曲线）	ease
`animation-delay`	延迟多久后开始动画	数值 + 单位（如 `1s`、`300ms`），支持负数（如 `-0.5s` 表示从动画中间开始）	0s
`animation-iteration-count`	动画循环次数	数值（如 `2` 表示循环 2 次）、`infinite`（无限循环）	1
`animation-direction`	动画播放方向	`normal`（正向）、`alternate`（正反交替）、`reverse`（反向）、`alternate-reverse`（反 - 正交替）	normal
`animation-fill-mode`	动画结束 / 延迟时的元素状态	`none`（回到初始状态）、`forwards`（保持结束状态）、`backwards`（延迟时显示初始关键帧状态）、`both`（同时应用 forwards 和 backwards）	none
`animation-play-state`	控制动画播放 / 暂停	`running`（播放）、`paused`（暂停）	running

简写属性：animation

为简化代码，可使用 animation 简写属性，顺序为：

animation: 名称时长速度曲线延迟循环次数方向填充模式播放状态;

简写示例：



.box {
  /* 等价于上面的完整属性配置 */
  animation: move 3s ease 0.5s infinite alternate forwards running;
}

注意：简写时时长（duration）和延迟（delay）顺序固定（第一个时间是时长，第二个是延迟），其他属性可按需调整顺序。

3、常用动画效果示例

淡入淡出（透明度动画）



@keyframes fadeInOut {
  0%, 100% { opacity: 0; } /* 开始和结束透明 */
  50% { opacity: 1; }      /* 中间不透明 */
}
 
.fade-box {
  width: 100px;
  height: 100px;
  background: pink;
  animation: fadeInOut 3s ease-in-out infinite; /* 无限循环淡入淡出 */
}

旋转 + 缩放动画



@keyframes rotateScale {
  0% {
    transform: rotate(0deg) scale(1); /* 初始：不旋转、原尺寸 */
  }
  100% {
    transform: rotate(360deg) scale(1.5); /* 结束：旋转 360°、放大 1.5 倍 */
  }
}
 
.rotate-box {
  width: 100px;
  height: 100px;
  background: purple;
  border-radius: 50%; /* 圆形 */
  animation: rotateScale 4s linear infinite; /* 匀速无限旋转缩放 */
}

呼吸效果（边框 + 透明度）



@keyframes breathe {
  0% {
    border: 2px solid #00aaff;
    box-shadow: 0 0 5px #00aaff;
    opacity: 0.8;
  }
  50% {
    border: 4px solid #00aaff;
    box-shadow: 0 0 20px #00aaff;
    opacity: 1;
  }
  100% {
    border: 2px solid #00aaff;
    box-shadow: 0 0 5px #00aaff;
    opacity: 0.8;
  }
}
 
.breathe-box {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  animation: breathe 2s ease-in-out infinite;
}

悬停触发动画（hover 结合）



@keyframes jump {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}
 
.jump-box {
  width: 100px;
  height: 100px;
  background: orange;
  transition: all 0.3s; /* 过渡平滑 */
}
 
.jump-box:hover {
  animation: jump 0.5s ease-in-out; /* 鼠标悬浮时触发跳跃动画 */
}

4、高级技巧

多关键帧精细控制

通过多个百分比节点，实现复杂动画路径：



@keyframes complexMove {
  0% { left: 0; top: 0; }
  25% { left: 300px; top: 0; } /* 右移 */
  50% { left: 300px; top: 200px; } /* 下移 */
  75% { left: 0; top: 200px; } /* 左移 */
  100% { left: 0; top: 0; } /* 上移回到原点 */
}
 
.complex-box {
  position: relative; /* 需定位才能使用 left/top */
  width: 100px;
  height: 100px;
  background: green;
  animation: complexMove 6s linear infinite;
}

自定义缓动曲线（cubic-bezier）

使用贝塞尔曲线工具生成自定义速度曲线，实现更灵活的动画节奏：



/* 弹跳效果的贝塞尔曲线 */
.box {
  animation: bounce 1s cubic-bezier(0.17, 0.67, 0.83, 0.67) infinite alternate;
}
 
@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-50px); }
}

动画暂停 / 播放（JS 控制）

结合 JavaScript 控制 animation-play-state 属性，实现交互控制：



<div class="box" id="animateBox"></div>
<button onclick="toggleAnimation()">暂停/播放</button>
 
<style>
.box {
  width: 100px;
  height: 100px;
  background: red;
  animation: move 3s linear infinite alternate;
}
</style>
 
<script>
function toggleAnimation() {
  const box = document.getElementById('animateBox');
  // 切换播放/暂停状态
  box.style.animationPlayState = 
    box.style.animationPlayState === 'paused' ? 'running' : 'paused';
}
</script>

多个动画同时执行

给元素绑定多个关键帧（用逗号分隔），实现多动画叠加：



.box {
  /* 同时执行 旋转 和 颜色变化 动画 */
  animation: 
    rotate 4s linear infinite, 
    colorChange 3s ease-in-out infinite alternate;
}
 
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
 
@keyframes colorChange {
  from { background: red; }
  to { background: blue; }
}

5、兼容性与注意事项

兼容性处理

现代浏览器（Chrome、Firefox、Edge、Safari 9.1+）均支持标准 CSS3 动画，无需前缀；如需兼容旧版浏览器（如 Safari 6-9），需添加私有前缀：



/* 兼容旧版 Safari/Chrome */
@-webkit-keyframes move {
  0% { -webkit-transform: translateX(0); }
  100% { -webkit-transform: translateX(600px); }
}
 
.box {
  -webkit-animation: move 3s ease infinite alternate; /* 前缀版动画属性 */
  animation: move 3s ease infinite alternate; /* 标准版 */
}

性能优化

优先使用 transform 和 opacity 实现动画（浏览器会启用 GPU 加速，避免重排重绘）；避免使用 left、top、width、height 等属性（会触发页面重排，性能较差）；动画元素添加 will-change: transform，提前告知浏览器准备动画，优化性能：


.box { will-change: transform; }

常见问题

动画不执行？检查 animation-duration 是否为 0（默认 0，需手动设置）；动画结束后回到初始状态？添加 animation-fill-mode: forwards 保持结束状态；延迟时元素无样式？添加 animation-fill-mode: backwards 显示初始关键帧状态。

全部评论(0)

上一篇：无网络环境安装前端 nvm 管理 node 开发环境
下一篇：《跨端互联进阶实践指南：从链路适配到长期效能的维护方案》

最新发布的资讯信息
【系统环境|】创建一个本地分支(2025-12-03 22:43)
【系统环境|】git 如何删除本地和远程分支？(2025-12-03 22:42)
【系统环境|】2019｜阿里11面+EMC+网易+美团面经(2025-12-03 22:42)
【系统环境|】32位单片机定时器入门介绍(2025-12-03 22:42)
【系统环境|】从 10 月 19 日起，GitLab 将对所有免费用户强制实施存储限制(2025-12-03 22:42)
【系统环境|】价值驱动的产品交付-OKR、协作与持续优化实践(2025-12-03 22:42)
【系统环境|】IDEA 强行回滚已提交到Master上的代码(2025-12-03 22:42)
【系统环境|】GitLab 15.1发布，Python notebook图形渲染和SLSA 2级构建工件证明(2025-12-03 22:41)
【系统环境|】AI 代码审查 (Code Review) 清单 v1.0(2025-12-03 22:41)
【系统环境|】构建高效流水线：CI/CD工具如何提升软件交付速度(2025-12-03 22:41)

真快激活码

店铺

推荐商品