运用动画效果，实现炫酷动画效果

CSS3中的动画功能为网页设计提供了丰富的动态表现能力。通过定义关键帧和动画属性，可以轻松实现从简单过渡到复杂交互的多种动画效果。这些动画效果不仅能提升用户体验，还能增强页面的视觉吸引力。

1. CSS动画的基础概念

CSS动画是通过@keyframes规则和相关动画属性实现的。@keyframes定义动画的关键帧，动画属性则用来控制动画的执行方式。

1.1 关键帧定义

@keyframes规则用于定义动画的多个阶段，指定每个阶段的样式变化。

代码案例：

<!DOCTYPE html>
<html>
<head>
    <style>
        @keyframes example {
            0% { background-color: red; left: 0px; }
            50% { background-color: yellow; left: 100px; }
            100% { background-color: green; left: 0px; }
        }

        .animated-box {
            position: relative; /* 必须设置为相对或绝对定位 */
            width: 100px;
            height: 100px;
            background-color: red;
            animation: example 3s infinite; /* 引用动画，并设置持续时间和重复次数 */
        }
    </style>
</head>
<body>

<div class="animated-box"></div>

</body>
</html>

代码说明：

@keyframes example 定义了动画的三个阶段：起始、中间和结束。
animation: example 3s infinite; 设置动画为3秒，循环执行。

2. 动画属性详解

CSS动画属性用于控制动画的行为，包括持续时间、重复次数、延迟时间等。

2.1 动画持续时间（animation-duration）

指定动画从开始到结束的时间，单位为秒（s）或毫秒（ms）。

代码案例：

<!DOCTYPE html>
<html>
<head>
    <style>
        @keyframes colorChange {
            from { background-color: blue; }
            to { background-color: orange; }
        }

        .box {
            width: 100px;
            height: 100px;
            animation-name: colorChange; /* 引用动画名称 */
            animation-duration: 5s; /* 动画持续5秒 */
        }
    </style>
</head>
<body>

<div class="box"></div>

</body>
</html>

代码说明：

animation-duration: 5s; 设置动画从开始到结束需要5秒。

2.2 动画重复次数（animation-iteration-count）

设置动画的重复次数，可以是数字或infinite（无限循环）。

代码案例：

<!DOCTYPE html>
<html>
<head>
    <style>
        @keyframes bounce {
            0% { transform: translateY(0); }
            50% { transform: translateY(-50px); }
            100% { transform: translateY(0); }
        }

        .bouncing-box {
            width: 50px;
            height: 50px;
            background-color: purple;
            animation: bounce 1s infinite; /* 动画无限循环 */
        }
    </style>
</head>
<body>

<div class="bouncing-box"></div>

</body>
</html>

代码说明：

animation-iteration-count: infinite; 设置动画无限循环。

2.3 动画延迟时间（animation-delay）

设置动画在执行前的延迟时间。

代码案例：

<!DOCTYPE html>
<html>
<head>
    <style>
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .fade-in-box {
            width: 150px;
            height: 150px;
            background-color: teal;
            animation: fadeIn 2s linear 1s; /* 延迟1秒后，2秒内完成动画 */
        }
    </style>
</head>
<body>

<div class="fade-in-box"></div>

</body>
</html>

代码说明：

animation-delay: 1s; 设置动画在开始前延迟1秒。

3. 常见动画效果实例

通过结合transform和@keyframes，可以实现各种炫酷的动画效果。

3.1 旋转动画

代码案例：

<!DOCTYPE html>
<html>
<head>
    <style>
        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .rotating-box {
            width: 100px;
            height: 100px;
            background-color: coral;
            animation: rotate 2s linear infinite; /* 持续旋转 */
        }
    </style>
</head>
<body>

<div class="rotating-box"></div>

</body>
</html>

代码说明：

transform: rotate(360deg); 让元素实现360度旋转。
animation: rotate 2s linear infinite; 设置动画为2秒，匀速无限循环。

3.2 放大缩小动画

代码案例：

<!DOCTYPE html>
<html>
<head>
    <style>
        @keyframes scale {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.5); }
        }

        .scaling-box {
            width: 100px;
            height: 100px;
            background-color: limegreen;
            animation: scale 1.5s ease-in-out infinite; /* 平滑放大缩小 */
        }
    </style>
</head>
<body>

<div class="scaling-box"></div>

</body>
</html>

代码说明：

transform: scale(1.5); 让元素在中间阶段放大到原尺寸的1.5倍。
ease-in-out 让动画以柔和的方式开始和结束。

3.3 心跳动画

代码案例：

<!DOCTYPE html>
<html>
<head>
    <style>
        @keyframes heartbeat {
            0%, 100% { transform: scale(1); }
            25%, 75% { transform: scale(1.2); }
        }

        .heartbeat-box {
            width: 100px;
            height: 100px;
            background-color: crimson;
            animation: heartbeat 1s ease-in-out infinite; /* 模拟心跳效果 */
        }
    </style>
</head>
<body>

<div class="heartbeat-box"></div>

</body>
</html>

代码说明：