CSS3 动画详解 - 技术栈

1.基本概念

CSS3 动画允许您通过定义关键帧和一系列动画属性，在网页上创建动态的视觉效果。与传统的 JavaScript 动画相比，CSS3 动画更易于编写和维护，并且在性能方面也有不错的表现。它可以应用于 HTML 元素，使元素在页面上移动、旋转、缩放、淡入淡出等。

关键帧（@keyframes）

2.定义关键帧的语法

关键帧是 CSS3 动画的核心部分，它定义了动画的起始状态、结束状态以及中间的过渡状态。使用@keyframes规则来定义关键帧，语法如下：

html 复制代码

@keyframes animation - name {
    from {
        /* 初始状态的样式 */
    }
    to {
        /* 结束状态的样式 */
    }
}

或者使用百分比的形式来定义多个关键帧：

html 复制代码

@keyframes animation - name {
    0% {
        /* 初始状态的样式 */
    }
    50% {
        /* 中间状态的样式 */
    }
    100% {
        /* 结束状态的样式 */
    }
}

其中animation - name是自定义的动画名称，用于在元素上应用这个动画。例如，定义一个名为my - animation的动画，让元素从透明变为不透明：

html 复制代码

@keyframes my - animation {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

关键帧的进阶使用

可以定义非常复杂的关键帧序列。比如，定义一个元素先旋转 360 度，再缩放为原来的一半，最后移动到新的位置的动画：

html 复制代码

@keyframes complex - animation {
    0% {
        transform: rotate(0deg) scale(1) translate(0,0);
    }
    50% {
        transform: rotate(360deg) scale(1) translate(0,0);
    }
    75% {
        transform: rotate(360deg) scale(0.5) translate(0,0);
    }
    100% {
        transform: rotate(360deg) scale(0.5) translate(50px,50px);
    }
}

3.动画属性

animation - name

这个属性用于指定要应用的关键帧动画的名称。例如，要将前面定义的my - animation动画应用到一个div元素上，可以这样写：

html 复制代码

div {
    animation - name: my - animation;
}

animation - duration

它指定动画完成一个周期所需要的时间，单位是秒（s）或者毫秒（ms）。例如，设置my - animation动画持续时间为 3 秒：

html 复制代码

div {
    animation - name: my - animation;
    animation - duration: 3s;
}

animation - timing - function

用于控制动画的速度曲线，也就是动画在每个周期中速度的变化方式。常见的值有：

ease：默认值，动画开始缓慢，中间加速，结束缓慢。

linear：动画以匀速进行。

ease - in：动画开始缓慢，然后加速。

ease - out：动画开始快速，然后减速。

cubic - bezier(n,n,n,n)：可以通过自定义贝塞尔曲线来更精确地控制动画速度，其中四个n是贝塞尔曲线的控制点坐标，取值范围是 0 - 1。例如，设置my - animation动画以匀速进行：

html 复制代码

div {
    animation - name: my - animation;
    animation - duration: 3s;
    animation - timing - function: linear;
}

animation - delay

用于设置动画开始前的延迟时间，单位是秒（s）或者毫秒（ms）。例如，设置my - animation动画延迟 1 秒开始：

html 复制代码

animation - delay
用于设置动画开始前的延迟时间，单位是秒（s）或者毫秒（ms）。例如，设置my - animation动画延迟 1 秒开始：

animation - iteration - count

它指定动画循环的次数。可以是一个具体的数字，如2（表示动画循环 2 次），也可以是infinite（表示动画无限循环）。例如，设置my - animation动画无限循环：

html 复制代码

div {
    animation - name: my - animation;
    animation - duration: 3s;
    animation - timing - function: linear;
    animation - iteration - count: infinite;
}

animation - direction

定义动画的播放方向。有以下几个值：

normal：动画按照正常方向播放，即从0%关键帧到100%关键帧。

reverse：动画反向播放，从100%关键帧到0%关键帧。

alternate：动画在奇数次数（1、3、5 等）正向播放，偶数次数（2、4、6 等）反向播放。

alternate - reverse：动画在奇数次数反向播放，偶数次数正向播放。例如，设置my - animation动画交替播放：

html 复制代码

div {
    animation - name: my - animation;
    animation - duration: 3s;
    animation - timing - function: linear;
    animation - iteration - count: 1;
    animation - direction: normal;
    animation - fill - mode: forwards;
}

4.动画的应用场景和示例

简单的元素淡入淡出效果

利用opacity属性和动画属性可以轻松实现元素的淡入淡出。例如，让一个p元素在页面加载时淡入：

html 复制代码

p {
    animation - name: fade - in;
    animation - duration: 2s;
    animation - fill - mode: forwards;
}
@keyframes fade - in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

元素的旋转和缩放效果

使用transform属性来实现元素的旋转和缩放动画。例如，让一个img元素在鼠标悬停时旋转 360 度并放大 1.2 倍：

html 复制代码

img {
    transition: all 0.5s ease;
}
img:hover {
    transform: rotate(360deg) scale(1.2);
}

复杂的路径动画（结合 SVG）

可以结合 SVG（可缩放矢量图形）来创建复杂的路径动画。例如，让一个元素沿着 SVG 定义的路径运动，这需要使用SVG的path元素和 CSS3 的transform - origin等属性来精确控制元素的运动路径。不过这种动画相对复杂，涉及到更深入的 SVG 和 CSS3 知识。

5.动画的兼容性和浏览器支持

CSS3 动画在现代浏览器中有较好的支持，但在一些旧版本浏览器中可能无法正常工作。例如，Internet Explorer 9 及以下版本对 CSS3 动画的支持有限。可以使用一些 CSS 前缀（如- webkit -、- moz -等）来提高兼容性，但这也增加了代码的复杂性。同时，也可以使用 JavaScript 库（如jQuery动画）作为 CSS3 动画的补充，在不支持 CSS3 动画的浏览器中提供类似的功能。