AI 摘要

文章系统梳理 CSS3 动画三大技术：transform 变形（translate、scale、skew、rotate 及其 3D 扩展）、transition 过渡（属性、时长、缓动、延迟及触发机制）、animation 关键帧动画（@keyframes 定义、animation 八参数调用）。通过按钮与方块示例对比过渡与动画差异，强调前者依赖事件驱动、后者可自运行并支持复杂时序，为前端动效开发提供完整语法与实战参考。

此摘要根据文章内容自动生成，仅用于文章内容的解释与总结

CSS3 变形

变形属性

在网页中实现动画效果，可以使用动态图片、Flash、JavaScript 来完成。

借助 CSS3 可以轻松倾斜、缩放、移动和翻转元素，实现动画效果。

CSS3 变形是一些效果的集合（如平移、旋转、缩放、倾斜等），包括 2D 变形和 3D 变形。每一个效果都可以称之为变形（transform）。

变形的基本用法：

transform: none | 变形函数;

2D 变形函数：

名称描述
translate()位移函数
scale()缩放函数
skew()倾斜函数
rotate()旋转函数

3D 变形函数：

名称描述
translate3d()位移函数
scale3d()缩放函数
rotate3d()旋转函数

2D 位移

translate 函数可以将元素从一个位置移动到另一个位置上，即位移。

translate 函数的基本用法：

transform: translate(x, y);
transform: translate(x);
transform: tranxlateX(x);
transform: translateY(y);

translate 函数的基本参数：

名称描述
xx 轴位移量
x>0 时元素向右移动
yy 轴位移量
y>0 时元素向下移动

示例：2D 位移

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .btn {
            background-color: green;
            width: 200px;
            height: 100px;
        }
        .btn:hover {
            transform: translate(20px, 30px);
        }
    </style>
</head>
<body>
    <button class="btn">点我！</button>
</body>
</html>

示例效果：

2D 缩放

scale 函数可以缩放元素大小。

scale 函数的基本用法：

transform: scale(x, y);
transform: scale(x);
transform: scale(x);
transform: scale(y);

scale 函数的基本参数：

名称描述
xx 轴缩放比例
0.99>x>0 时 x 轴缩小，x>1 时 x 轴放大
yy 轴缩放比例
0.99>y>0 时 y 轴缩小，y>1 时 y 轴放大

示例：2D 缩放

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .btn {
            background-color: green;
            width: 200px;
            height: 100px;
        }
        .btn:hover {
            transform: scale(2, 3);
        }
    </style>
</head>
<body>
    <button class="btn">点我！</button>
</body>
</html>

示例效果：

2D 倾斜

skew 函数可以让元素倾斜显示，可将元素以其中心位置围绕着 x 轴和 y 轴按照一定角度倾斜。

skew 函数会改变元素的形状。

skew 函数的基本用法：

translate: skew(x, y);
translate: skew(x);
translate: skewX(x);
translate: skewY(y);

skew 函数的基本参数：

名称描述
xx 轴方向（水平方向）的倾斜角度，单位为 deg（度）
x>0deg 时向左倾斜
yy 轴方向（垂直方向）的倾斜角度，单位为 deg（度）
y>0deg 时向上倾斜

示例：2D 倾斜

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .btn {
            background-color: green;
            width: 200px;
            height: 100px;
        }
        .btn:hover {
            transform: skew(40deg, -20deg);
        }
    </style>
</head>
<body>
    <button class="btn">点我！</button>
</body>
</html>

示例效果：

2D 旋转

rotate 函数可以让元素在二维空间里绕着一个指定的角度旋转。

rotate 函数不会改变元素的形状。

rotate 函数的基本用法：

translate: rotate(a);

rotate 函数常见的参数：

名称描述
a旋转角度
a>0deg 时元素顺时针旋转

示例：2D 旋转

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .btn {
            background-color: green;
            width: 200px;
            height: 100px;
        }
        .btn:hover {
            transform: rotate(90deg);
        }
    </style>
</head>
<body>
    <button class="btn">点我！</button>
</body>
</html>

示例效果：

CSS3 过渡

过渡属性

过渡是指元素从一种样式逐渐改变为另一种样式的效果。

过渡属性的基本用法：

transition: 过渡属性 过渡所需时间 过渡动画函数 过渡延迟时间;
transition-property: 过渡属性;
transition-duration: 过渡所需时间;
transition-timing-function: 过渡动画函数;
transition-delay: 过渡延迟时间;

过渡属性的基本参数：

名称描述
过渡属性定义转换动画的 CSS 属性名称
property：指定的 CSS 属性，如 width、height、background-color 属性等
all：指定所有元素支持 transition-property 属性的样式
none：没有属性会获得过渡效果
过渡所需时间定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒
过渡动画函数指定浏览器的过渡速度，以及过渡期间的操作进展情况
通过给过渡添加一个函数来指定动画的快慢方式
ease：速度由快到慢（默认值）
linear：速度恒速（匀速运动）
ease-in：速度越来越快（渐显效果）
ease-out：速度越来越慢（渐隐效果）
ease-in-out：速度先加速再减速（渐显渐隐效果）
过渡延迟时间指定一个动画开始执行的时间，单位秒或者毫秒
正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发
负值：元素过渡效果会从该时间点开始显示，之前的动作被截断
0：默认值，元素过渡效果立即执行

示例：过渡效果

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: green;
            transition: background-color 5s ease-in;
        }
        .box:hover {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

示例效果：

过渡触发机制

会触发过渡效果的情况，即让一个元素有多态样式的情况有：

  • 伪类触发：如 hover、active、focus、checked 等。
  • 媒体查询：通过 @media 属性判断设备的尺寸、方向等。
  • JavaScript 触发。

CSS3 动画

动画属性

animation 属性用于实现动画效果。

使用 CSS 实现动画效果，需要先通过关键帧声明一个动画。

@keyframes 的基本用法：

@keyframes 动画名称 {
    from {
        /* 开始时，即0%时的CSS样式 */
    }
    xx% {
        /* xx%时的CSS样式 */
    }
    to {
        /* 结束时，即100%时的CSS样式 */
    }
}

示例：设置关键帧

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: green;
        }

        @keyframes show {
            0% {
                width: 500px;
            }
            25% {
                width: 600px;
            }
            50% {
                width: 700px;
            }
            75% {
                width: 600%;
            }
            100% {
                width: 500px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

关键帧设置完成后，需要找到要设置动画的元素，调用关键帧声明的动画。

animation 属性的基本用法：

animation: 动画名称 动画时间 动画方式 延迟时间 播放次数 播放方向 播放状态 动画时间外的状态;
animation-name: 动画名称;
animation–duration: 动画时间;
animation-timing-function: 动画方式;
animation-delay: 延迟时间;
animation-iteration-count: 播放次数;
animation-direction: 播放方向;
animation-play-state: 播放状态;
animation-fill-mode: 动画时间外的状态;

animation 属性的基本参数：

名称描述
动画名称调用 @keyframes 定义的动画名称
动画时间同过渡时间
动画方式同过渡方式
延迟时间同过渡延迟时间
播放次数infinite：动画无限次播放
默认值为 1
播放方向normal：动画每次都是循环向前播放
alternate：动画播放为偶数次则向前播放
播放状态running：将暂停的动画重新播放
paused：将正在播放的元素动画停下来
动画时间外的状态forwards：动画在结束后继续应用最后关键帧的位置
backwards：在向元素应用动画样式时迅速应用动画的初始帧
both：元素动画同时具有 forwards 和 backwards 的效果

示例：添加动画

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: green;
        }

        @keyframes show {
            0% {
                width: 500px;
            }
            25% {
                width: 600px;
            }
            50% {
                width: 700px;
            }
            75% {
                width: 600px;
            }
            100% {
                width: 500px;
            }
        }

        .box:hover {
            animation: show 1s infinite;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

示例效果：

过渡和动画对比

实现动画的方式不同：

  • transition 过渡属性通过指定属性的初始状态样式和结束状态样式，在两个状态之间进行平滑过渡实现动画效果。
  • animation 动画属性通过设置关键帧、调用关键帧的方式来实现动画效果，支持复杂的动画效果。

触发动画的方式不同：

  • transition 过渡属性实现动画需要触发一个事件，如 hover 事件等。
  • animation 动画属性实现动画可以在不触发任何事件的情况下也能随着时间的变化来实现动画效果。