CSS3 动画详解

1加1等于

于 2025-07-04 13:33:33 发布

阅读量829

点赞数 16

CC 4.0 BY-SA版权

分类专栏： CSS实战文章标签： css3

本文链接：https://blog.csdn.net/weixin_45075226/article/details/149080524

CSS实战专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了CSS3 动画的原理、使用，最后并结合一个加载页面的动画案例展示了如何在实际的场景中进行使用。

本文目录

- - 一、CSS3 动画
  - 二、加载页面动画案例

一、CSS3 动画

CSS3 动画允许元素在一段时间内从一个样式逐渐变化到另一个样式，通过 @keyframes 规则定义动画序列，再使用 animation 属性将动画应用到元素上。

@keyframes 规则：用于定义动画的关键帧，指定元素在不同时间点的样式。语法为 @keyframes animation-name { from { /* 起始样式 */ } to { /* 结束样式 */ } } 或使用百分比指定多个关键帧。
animation 属性：是一个简写属性，包含 animation-name（动画名称）、animation-duration（动画持续时间）、animation-timing-function（动画速度曲线）、animation-delay（动画延迟时间）、animation-iteration-count（动画播放次数）、animation-direction（动画播放方向）等子属性。

下面实现在系统的广告区域，让广告标题闪烁。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        @keyframes blink {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0.2;
            }
            100% {
                opacity: 1;
            }
        }

       .ad-title {
            animation: blink 2s infinite;
        }
    </style>
</head>

<body>
    <h2 class="ad-title">限时特惠！</h2>
</body>

</html>

二、加载页面动画案例

通过 @keyframes 定义元素在不同关键帧的位置和样式，模拟跑步的动作。通常需要结合图片的背景定位或元素的位移来实现。准备包含跑步姿态的雪碧图，使用 background-position 或 transform 改变元素的位置和背景显示区域，设置动画的持续时间和循环次数。

下面实现在系统的加载页面，使用一个小人跑步的动画。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        @keyframes run {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -800px 0;
            }
        }

       .runner {
            width: 100px;
            height: 100px;
            background-image: url('runner-sprite.png');
            animation: run 1s steps(8) infinite;
        }
    </style>
</head>

<body>
    <div class="runner"></div>
</body>

</html>