您现在位置> 首页 > 编程 > HTML CSS > CSS3
← CSS3 过渡效果 CSS3 多列布局 →

CSS3 动画

著
原创 2025-09-20 CSS3 已有人查阅

CSS3 动画制作指南：从基础到实战

理解CSS3动画

CSS3动画功能比CSS过渡提供了更强大的控制能力，允许我们通过关键帧技术精确控制动画在不同时间点的表现。与Flas类似，CSS动画使用@keyframes规则定义动画序列，然后通过一系列动画属性应用到元素上。

创建CSS动画的基本步骤

创建CSS动画需要两个核心步骤：

  1. 使用@keyframes规则定义动画序列和名称

  2. 通过animation-name引用定义好的动画，并设置animation-duration等属性控制动画行为

基础动画示例

/* 定义关键帧动画 */
@keyframes slide-in {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

/* 应用动画到元素 */
.sliding-box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    animation-name: slide-in;
    animation-duration: 1.5s;
}

这个例子创建了一个从左侧滑入的动画效果。在我的项目中，这种滑动动画常用于页面元素的入场效果，比简单显示更有视觉吸引力。

关键帧详解

关键帧使用百分比或from/to关键字定义动画在不同时间点的状态。百分比表示动画完成度的比例，0%代表开始状态，100%代表结束状态。

复杂关键帧动画示例

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-40px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}

.bouncing-element {
    animation: bounce 2s ease-in-out;
}

这种弹跳动画非常适合按钮或需要吸引用户注意力的元素。我通常会在用户交互反馈中使用这类动画，提供更生动的用户体验。

动画属性全解析

CSS提供了多个动画属性，用于精确控制动画的各个方面：

1. animation-name

指定要应用的@keyframes动画名称。

.element {
    animation-name: fade-in;
}

2. animation-duration

定义动画完成一个周期所需的时间。

.element {
    animation-duration: 2s;
}

3. animation-timing-function

控制动画的速度曲线，常见值有：linear、ease、ease-in、ease-out、ease-in-out。

.element {
    animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

4. animation-delay

设置动画开始前的延迟时间。

.element {
    animation-delay: 0.5s;
}

5. animation-iteration-count

定义动画播放次数，可以使用数字或infinite（无限循环）。

.element {
    animation-iteration-count: 3;
}

6. animation-direction

指定动画播放方向：normal、reverse、alternate（交替）或alternate-reverse。

.element {
    animation-direction: alternate;
}

7. animation-fill-mode

定义动画执行前后如何应用样式：none、forwards、backwards或both。

.element {
    animation-fill-mode: forwards;
}

8. animation-play-state

控制动画播放状态：running或paused。

.element:hover {
    animation-play-state: paused;
}

动画简写属性

为了提高代码效率，CSS提供了animation简写属性：

.animated-element {
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
    animation: pulse 2s ease-in-out 0.5s infinite alternate;
}

使用简写属性时，需要注意值的顺序。如果省略某些值，将使用默认值。但必须包含animation-name和animation-duration，否则动画不会生效。

实战演示

下面是一个完整的CSS3动画示例页面：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3动画实战 - 代码号编程学习</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f7f9fc;
            color: #333;
            line-height: 1.6;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            padding: 40px 0;
            margin-bottom: 40px;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 15px;
        }
        
        .description {
            font-size: 1.1rem;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-bottom: 50px;
        }
        
        .animation-card {
            background: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease;
        }
        
        .animation-card:hover {
            transform: translateY(-5px);
        }
        
        .card-title {
            font-size: 1.3rem;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #6a11cb;
            color: #2c3e50;
        }
        
        .demo-box {
            height: 150px;
            background: #3498db;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .code-container {
            background: #2d3a4b;
            color: #e2e8f0;
            padding: 15px;
            border-radius: 8px;
            font-family: 'Consolas', monospace;
            font-size: 0.9rem;
            overflow-x: auto;
            margin-bottom: 15px;
        }
        
        .controls {
            display: flex;
            gap: 10px;
        }
        
        button {
            padding: 8px 15px;
            background: #6a11cb;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        button:hover {
            background: #2575fc;
        }
        
        /* 动画定义 */
        @keyframes slideIn {
            from {
                transform: translateX(-100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        
        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }
        
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        
        @keyframes colorChange {
            0% {
                background-color: #3498db;
            }
            33% {
                background-color: #e74c3c;
            }
            66% {
                background-color: #2ecc71;
            }
            100% {
                background-color: #3498db;
            }
        }
        
        @keyframes bounce {
            0%, 100% {
                transform: translateY(0);
            }
            25% {
                transform: translateY(-30px);
            }
            50% {
                transform: translateY(0);
            }
            75% {
                transform: translateY(-15px);
            }
        }
        
        @keyframes shake {
            0%, 100% {
                transform: translateX(0);
            }
            25% {
                transform: translateX(-10px);
            }
            50% {
                transform: translateX(10px);
            }
            75% {
                transform: translateX(-5px);
            }
        }
        
        /* 应用动画的类 */
        .slide-animation {
            animation: slideIn 1.5s ease-out;
        }
        
        .pulse-animation {
            animation: pulse 2s infinite;
        }
        
        .rotate-animation {
            animation: rotate 3s linear infinite;
        }
        
        .color-animation {
            animation: colorChange 4s infinite;
        }
        
        .bounce-animation {
            animation: bounce 1.5s infinite;
        }
        
        .shake-animation {
            animation: shake 0.5s infinite;
        }
        
        footer {
            text-align: center;
            margin-top: 50px;
            padding: 20px;
            background: linear-gradient(to right, #f5f7fa, #c3cfe2);
            border-radius: 8px;
            font-size: 0.9rem;
            color: #5a677d;
        }
        
        @media (max-width: 768px) {
            .container {
                grid-template-columns: 1fr;
            }
            
            h1 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>CSS3动画功能实战演示</h1>
        <p class="description">探索CSS3强大的动画功能，创建生动有趣的用户界面效果</p>
    </header>
    
    <div class="container">
        <div class="animation-card">
            <h2 class="card-title">滑动动画</h2>
            <div class="demo-box" id="demo1">
                滑动效果演示
            </div>
            <div class="code-container">
@keyframes slideIn {<br>
&nbsp;&nbsp;from { transform: translateX(-100%); opacity: 0; }<br>
&nbsp;&nbsp;to { transform: translateX(0); opacity: 1; }<br>
}
            </div>
            <div class="controls">
                <button onclick="applyAnimation('demo1', 'slide-animation')">应用动画</button>
                <button onclick="resetAnimation('demo1')">重置</button>
            </div>
        </div>
        
        <div class="animation-card">
            <h2 class="card-title">脉冲动画</h2>
            <div class="demo-box" id="demo2">
                脉冲效果演示
            </div>
            <div class="code-container">
@keyframes pulse {<br>
&nbsp;&nbsp;0% { transform: scale(1); }<br>
&nbsp;&nbsp;50% { transform: scale(1.1); }<br>
&nbsp;&nbsp;100% { transform: scale(1); }<br>
}
            </div>
            <div class="controls">
                <button onclick="applyAnimation('demo2', 'pulse-animation')">应用动画</button>
                <button onclick="resetAnimation('demo2')">重置</button>
            </div>
        </div>
        
        <div class="animation-card">
            <h2 class="card-title">旋转动画</h2>
            <div class="demo-box" id="demo3">
                旋转效果演示
            </div>
            <div class="code-container">
@keyframes rotate {<br>
&nbsp;&nbsp;from { transform: rotate(0deg); }<br>
&nbsp;&nbsp;to { transform: rotate(360deg); }<br>
}
            </div>
            <div class="controls">
                <button onclick="applyAnimation('demo3', 'rotate-animation')">应用动画</button>
                <button onclick="resetAnimation('demo3')">重置</button>
            </div>
        </div>
        
        <div class="animation-card">
            <h2 class="card-title">颜色变化动画</h2>
            <div class="demo-box" id="demo4">
                颜色变化演示
            </div>
            <div class="code-container">
@keyframes colorChange {<br>
&nbsp;&nbsp;0% { background-color: #3498db; }<br>
&nbsp;&nbsp;33% { background-color: #e74c3c; }<br>
&nbsp;&nbsp;66% { background-color: #2ecc71; }<br>
&nbsp;&nbsp;100% { background-color: #3498db; }<br>
}
            </div>
            <div class="controls">
                <button onclick="applyAnimation('demo4', 'color-animation')">应用动画</button>
                <button onclick="resetAnimation('demo4')">重置</button>
            </div>
        </div>
        
        <div class="animation-card">
            <h2 class="card-title">弹跳动画</h2>
            <div class="demo-box" id="demo5">
                弹跳效果演示
            </div>
            <div class="code-container">
@keyframes bounce {<br>
&nbsp;&nbsp;0%, 100% { transform: translateY(0); }<br>
&nbsp;&nbsp;25% { transform: translateY(-30px); }<br>
&nbsp;&nbsp;50% { transform: translateY(0); }<br>
&nbsp;&nbsp;75% { transform: translateY(-15px); }<br>
}
            </div>
            <div class="controls">
                <button onclick="applyAnimation('demo5', 'bounce-animation')">应用动画</button>
                <button onclick="resetAnimation('demo5')">重置</button>
            </div>
        </div>
        
        <div class="animation-card">
            <h2 class="card-title">抖动动画</h2>
            <div class="demo-box" id="demo6">
                抖动效果演示
            </div>
            <div class="code-container">
@keyframes shake {<br>
&nbsp;&nbsp;0%, 100% { transform: translateX(0); }<br>
&nbsp;&nbsp;25% { transform: translateX(-10px); }<br>
&nbsp;&nbsp;50% { transform: translateX(10px); }<br>
&nbsp;&nbsp;75% { transform: translateX(-5px); }<br>
}
            </div>
            <div class="controls">
                <button onclick="applyAnimation('demo6', 'shake-animation')">应用动画</button>
                <button onclick="resetAnimation('demo6')">重置</button>
            </div>
        </div>
    </div>
    
    <footer>
        <p>© 2025 代码号编程学习 | 更多CSS教程请访问：<a href="https://www.ebingou.cn/biancheng/htmlcss/css/" target="_blank">https://www.ebingou.cn/biancheng/htmlcss/css/</a></p>
        <p>联系邮箱：alan@ebingou.cn</p>
    </footer>

    <script>
        function applyAnimation(elementId, animationClass) {
            const element = document.getElementById(elementId);
            // 先移除可能存在的动画类
            element.classList.remove('slide-animation', 'pulse-animation', 'rotate-animation', 
                                   'color-animation', 'bounce-animation', 'shake-animation');
            // 触发重排
            void element.offsetWidth;
            // 添加新的动画类
            element.classList.add(animationClass);
        }
        
        function resetAnimation(elementId) {
            const element = document.getElementById(elementId);
            element.classList.remove('slide-animation', 'pulse-animation', 'rotate-animation', 
                                   'color-animation', 'bounce-animation', 'shake-animation');
        }
    </script>
</body>
</html>

本节课程知识要点

  1. CSS动画基础：CSS3动画通过@keyframes规则定义，使用animation属性应用

  2. 关键帧概念：使用百分比或from/to关键字定义动画在不同时间点的状态

  3. 动画属性：掌握8个核心动画属性及其作用

  4. 性能优化：优先使用transform和opacity属性制作动画，这些属性可由GPU加速

  5. 浏览器兼容性：现在浏览器对CSS动画支持良好，但可能需要供应商前缀

项目应用建议

在我的项目开发经验中，CSS动画最适合用于用户界面反馈、元素入场/离场效果以及微交互设计。与JavaScript动画相比，CSS动画性能更好，尤其是在移动设备上。

过度使用动画可能会分散用户注意力，甚至导致某些用户感到不适。遵循"少即是多"的原则，只在必要时使用动画增强用户体验。

对于复杂动画序列，可以考虑使用CSS动画库如Animate.css，或者使用JavaScript控制CSS动画以获得更灵活的控制。

本文标签：
← CSS3 过渡效果 CSS3 多列布局 →

感谢您的认可和支持

微信支付二维码 - 长按识别

微信

支付宝二维码 - 长按识别

支付宝

持续输出优质内容需要动力，您的每一个打赏都是深夜码字时的温暖咖啡☕
分享笔记 （共有 篇笔记）
验证码：
微信公众号