当前位置：极客教程 > CSS > CSS 问答 > CSS动画属性

CSS动画属性

CSS动画属性

在网页设计中，动画效果可以为页面增添生动感和交互性，提升用户体验。CSS动画属性是实现网页动画效果的重要工具，通过简单的CSS代码就可以实现各种动画效果。本文将详细介绍CSS动画属性的使用方法，并提供多个示例代码供参考。

1. transition属性

transition属性用于定义元素在状态改变时的过渡效果，可以控制元素的平滑过渡。语法如下：

.element {
    transition: property duration timing-function delay;
}
  • property：指定要过渡的CSS属性，如all、width、color等。
  • duration：指定过渡的持续时间，单位为秒或毫秒。
  • timing-function：指定过渡的时间函数，如ease、linear、ease-in-out等。
  • delay：指定过渡开始前的延迟时间，单位为秒或毫秒。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transition Example</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #f00;
            transition: width 1s ease-in-out;
        }

        .box:hover {
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

Output:

CSS动画属性

运行结果：鼠标悬停在红色方块上时，宽度会平滑过渡到200px。

2. animation属性

animation属性是CSS3中新增的属性，用于创建复杂的动画效果。通过定义关键帧（keyframes）来控制动画的每一帧。语法如下：

.element {
    animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}

@keyframes name {
    from {
        /* 初始状态 */
    }
    to {
        /* 结束状态 */
    }
}
  • name：指定动画的名称，对应@keyframes中定义的关键帧。
  • duration：指定动画的持续时间，单位为秒或毫秒。
  • timing-function：指定动画的时间函数，如ease、linear、ease-in-out等。
  • delay：指定动画开始前的延迟时间，单位为秒或毫秒。
  • iteration-count：指定动画的播放次数，可以为具体次数或infinite。
  • direction：指定动画的播放方向，如normal、reverse、alternate等。
  • fill-mode：指定动画在播放前和播放后的状态，如forwards、backwards、both。
  • play-state：指定动画的播放状态，如running、paused。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation Example</title>
    <style>
        .circle {
            width: 100px;
            height: 100px;
            background-color: #00f;
            border-radius: 50%;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="circle"></div>
</body>
</html>

Output:

CSS动画属性

运行结果：页面上有一个蓝色圆形，会以线性方式无限旋转。

3. @keyframes规则

@keyframes规则用于定义动画的关键帧，通过指定不同的百分比来控制动画的每一帧。语法如下：

@keyframes name {
    0% {
        /* 初始状态 */
    }
    50% {
        /* 中间状态 */
    }
    100% {
        /* 结束状态 */
    }
}

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Keyframes Example</title>
    <style>
        .rectangle {
            width: 100px;
            height: 100px;
            background-color: #0f0;
            animation: slide 2s ease-in-out infinite;
        }

        @keyframes slide {
            0% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(200px);
            }
            100% {
                transform: translateX(0);
            }
        }
    </style>
</head>
<body>
    <div class="rectangle"></div>
</body>
</html>

Output:

CSS动画属性

运行结果：页面上有一个绿色正方形，会在X轴上来回滑动。

4. transform属性

transform属性用于对元素进行变换，包括平移、旋转、缩放、倾斜等。常用的值有translate()、rotate()、scale()、skew()等。语法如下：

.element {
    transform: function(value);
}

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transform Example</title>
    <style>
        .square {
            width: 100px;
            height: 100px;
            background-color: #ff0;
            transform: rotate(45deg) scale(1.5);
        }
    </style>
</head>
<body>
    <div class="square"></div>
</body>
</html>

Output:

CSS动画属性

运行结果：页面上有一个黄色正方形，会以45度角度旋转并放大1.5倍。

5. perspective属性

perspective属性用于定义3D元素的透视效果，使元素在3D空间中具有深度感。语法如下：

.parent {
    perspective: value;
}

.child {
    transform: rotateY(value);
}
  • perspective：指定透视距离，值越大，透视效果越明显。
  • rotateY：绕Y轴旋转元素。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Perspective Example</title>
    <style>
        .container {
            perspective: 1000px;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: #0ff;
            transform: rotateY(45deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

Output:

CSS动画属性

运行结果：页面上有一个蓝绿色正方形，具有透视效果，看起来有立体感。

6. transition-timing-function属性

transition-timing-function属性用于指定过渡效果的时间函数，控制过渡的速度变化。常用的值有ease、linear、ease-in、ease-out等。语法如下：

.element {
    transition-timing-function: value;
}

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transition Timing Function Example</title>
    <style>
        .circle {
            width: 100px;
            height: 100px;
            background-color: #f0f;
            transition: width 1s ease-in-out;
        }

        .circle:hover {
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="circle"></div>
</body>
</html>

Output:

CSS动画属性

运行结果：鼠标悬停在紫色圆形上时，宽度会以ease-in-out的时间函数进行平滑过渡。

7. animation-direction属性

animation-direction属性用于指定动画的播放方向，可以是正向播放、反向播放或交替播放。常用的值有normal、reverse、alternate等。语法如下：

.element {
    animation-direction: value;
}

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation Direction Example</title>
    <style>
        .rectangle {
            width: 100px;
            height: 100px;
            background-color: #0f0;
            animation: slide 2s ease-in-out infinite alternate;
        }

        @keyframes slide {
            0% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(200px);
            }
            100% {
                transform: translateX(0);
            }
        }
    </style>
</head>
<body>
    <div class="rectangle"></div>
</body>
</html>

Output:

CSS动画属性

运行结果：页面上有一个绿色正方形，会在X轴上来回滑动，播放方向为交替播放。

8. animation-fill-mode属性

animation-fill-mode属性用于指定动画在播放前和播放后的状态，可以保持动画的最终状态或初始状态。常用的值有forwards、backwards、both。语法如下：

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

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation Fill Mode Example</title>
    <style>
        .circle {
            width: 100px;
            height: 100px;
            background-color: #00f;
            animation: spin 2s linear forwards;
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="circle"></div>
</body>
</html>

Output:

CSS动画属性

运行结果：页面上有一个蓝色圆形，会以线性方式旋转360度，并保持最终状态。

9. animation-play-state属性

animation-play-state属性用于控制动画的播放状态，可以暂停或继续动画的播放。常用的值有running、paused。语法如下：

.element {
    animation-play-state: value;
}

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation Play State Example</title>
    <style>
        .circle {
            width: 100px;
            height: 100px;
            background-color: #f00;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        .pause-button {
            margin-top: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="circle"></div>
    <button class="pause-button" onclick="pauseAnimation()">Pause Animation</button>

    <script>
        function pauseAnimation() {
            var circle = document.querySelector('.circle');
            circle.style.animationPlayState = circle.style.animationPlayState === 'paused' ? 'running' : 'paused';
        }
    </script>
</body>
</html>

Output:

CSS动画属性

运行结果：页面上有一个红色圆形，会以线性方式无限旋转。点击按钮可以暂停或继续动画的播放。

10. animation-delay属性

animation-delay属性用于指定动画开始前的延迟时间，可以让动画在一定时间后开始播放。语法如下：

.element {
    animation: name duration timing-function delay;
}
  • delay：指定动画开始前的延迟时间，单位为秒或毫秒。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation Delay Example</title>
    <style>
        .circle {
            width: 100px;
            height: 100px;
            background-color: #ff0;
            animation: spin 2s linear infinite 1s;
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="circle"></div>
</body>
</html>

Output:

CSS动画属性

运行结果：页面上有一个黄色圆形，会以线性方式无限旋转，但是在1秒后才开始旋转。

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

CSS 精品教程