Html-CSS动画

CSS动画技术指南

CSS动画概述

CSS动画是通过CSS技术控制页面元素属性变化的实现方式。相比JavaScript动画，CSS动画具有以下优势：

• 无需依赖JavaScript即可实现
• 动画效果更流畅
• 由浏览器直接执行，性能更高
• 代码量更少
• 兼容性良好（通常支持IE10及以上浏览器）

如何鼠标移到指定位置出现盒子

过渡(Transition)效果

1.1 过渡基础

过渡(transition)用于指定属性变化时的平滑切换方式：

• 需要特定条件触发（如:hover、:active、:focus）
• 一次性效果，不支持循环
• 仅包含初始值和结束值两帧
• 兼容IE10+，移动端支持良好

1.2 过渡属性

1. transition-property
   指定参与过渡的属性：

   • none：无过渡效果
   • all：所有属性参与过渡（默认）
   • property：自定义属性列表（逗号分隔）

   注意：

   • 所有数值类型属性均可参与过渡（width/height/left/top等）
   • 需在有效数值间进行过渡

2. transition-duration
   指定过渡持续时间（必填）
   单位：s（秒）或ms（毫秒）

3. transition-timing-function
   控制过渡变化曲线（可选）：

   • ease：默认值（慢→快→慢）
   • linear：匀速
   • ease-in：慢→快
   • ease-out：快→慢
   • ease-in-out：慢→快→慢
   • steps()：分步过渡
   • cubic-bezier(n,n,n,n)：贝塞尔曲线（0-1值）

4. transition-delay
   设置过渡延迟时间（可选）
   单位：s或ms

5. transition
   简写属性，可同时设置以上所有属性（可选）

关键帧动画(Animation)

2.1 动画基础

与过渡不同，动画可自动触发，无需属性变化。

关键帧设置方法：

/* 方法一 */ @keyframes 名称 { from {初始状态} to {结束状态} } /* 方法二 */ @keyframes 名称 { 0% {初始状态} 50% {中间状态} 100% {结束状态} }

注意：

• 帧顺序可调整
• 未指定初始/结束帧时使用元素默认样式
• 可使用逗号同时设置多个关键帧

2.2 动画属性

1. animation-name
   绑定关键帧名称（必填），可设置多个动画（逗号分隔）

2. animation-duration
   动画持续时间（必填）
   单位：s或ms

3. animation-timing-function
   动画速度曲线（与过渡相同）

4. animation-delay
   动画延迟时间

5. animation-iteration-count
   播放次数：

   • n：具体次数
   • infinite：无限循环

6. animation-direction
   播放方向：

   • normal：默认（from→to）
   • reverse：to→from
   • alternate：正向+反向交替
   • alternate-reverse：反向+正向交替

7. animation-fill-mode
   动画非播放时的元素样式：

   • none：默认（恢复初始）
   • forwards：保持结束状态
   • backwards：保持初始状态
   • both：结合两者

8. animation-play-state
   控制动画状态：

   • running：播放（默认）
   • paused：暂停

9. animation
   简写属性，可包含以上所有属性值

2D变形(Transform)

3.1 位移(translate)

transform: translate(x,y);

• x轴：正值右移，负值左移
• y轴：正值下移，负值上移
• 可单独设置：translateX()/translateY()/translateZ()
• 支持百分比（基于自身尺寸）
• 不影响其他元素布局
• 对行内元素无效

垂直水平居中实现：

position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);

3.2 旋转(rotate)

transform: rotate(角度);

• 默认绕中心点旋转
• 单位：deg（度）
• 正值：顺时针
• 负值：逆时针
• 可单独设置：rotateX()/rotateY()/rotateZ()

3.3 缩放(scale)

transform: scale(x, y);

• 默认值：1（无单位）
• 值 < 1：缩小元素；值 > 1：放大元素
• 支持单独设置各轴向：scaleX() / scaleY() / scaleZ()
• 缩放操作不会影响其他元素的布局

3.4 倾斜(skew)

transform: skew(x-angle, y-angle);

• 倾斜单位：deg
• 单参数：仅设置x轴倾斜角度（y轴默认为0）
• 双参数：第一个为x轴角度，第二个为y轴角度
• 倾斜方向：
  • x轴正值向左倾斜，负值向右倾斜
  • y轴正值向上倾斜，负值向下倾斜
  • 参照点为元素左上角
• 支持单独设置：

  transform: skewX(); transform: skewY();

3.5 变形原点(transform-origin)

transform-origin: x-axis y-axis;

• 功能：改变元素变形时的基准点（默认为元素中心）
• 生效条件：必须配合transform属性使用
• 取值方式：
  • 关键词：left/center/right/top/bottom等
  • 数值：px或百分比（基于元素左上角计算）
• 默认值：

  transform-origin: center center;