网站首页 > 技术文章正文

CSS 中实现动画效果的方法_css动画制作

nanyue 2025-09-04 14:20:08 技术文章 5 ℃

在 CSS 中实现动画效果主要有两种方式：过渡（Transition）和关键帧动画（Animation），下面为你详细介绍这两种方式。

过渡（Transition）

过渡是指元素从一种样式逐渐变化为另一种样式的效果，它可以在元素的两个状态之间平滑地过渡。

实现步骤

1. 确定过渡的元素：选择你想要添加过渡效果的 HTML 元素。

2. 定义元素的初始状态和目标状态：通过 CSS 样式来设置元素的初始状态和目标状态。

3. 设置过渡属性：使用 transition 属性来指定过渡的属性、过渡时间、延迟时间和过渡函数。

示例代码

<!DOCTYPE html>

<head>

<title>CSS Transition Example</title>

<style>

/* 定义按钮的初始状态 */

button {

background-color: blue;

color: white;

padding: 10px 20px;

border: none;

/* 设置过渡属性：过渡的属性为 background - color，过渡时间为 0.3 秒，过渡函数为 ease */

transition: background-color 0.3s ease;

}

/* 定义按钮的目标状态（鼠标悬停时） */

button:hover {

background-color: red;

}

</style>

</head>

<body>

<button>Hover me</button>

</body>

</html>

代码解释

● transition 属性的语法为 transition: property duration timing - function delay; ，其中：

○ property ：指定要过渡的 CSS 属性，如 background - color 、 width 、 opacity 等。

○ duration ：指定过渡的时间，单位可以是秒（s）或毫秒（ms）。

○ timing - function ：指定过渡的速度曲线，常见的值有 ease 、 linear 、 ease - in 、 ease - out 等。

○ delay ：指定过渡的延迟时间，即从触发过渡到开始过渡之间的时间间隔。

关键帧动画（Animation）

关键帧动画允许你创建更复杂的动画效果，通过 @keyframes 规则定义动画序列，然后使用 animation 属性将动画应用到元素上。

实现步骤

1. 定义关键帧动画：使用 @keyframes 规则定义动画序列，指定动画在不同时间点的状态。

2. 应用动画到元素：使用 animation 属性将定义好的动画应用到 HTML 元素上。

示例代码

<!DOCTYPE html>

<head>

<title>CSS Animation Example</title>

<style>

/* 定义一个名为 slide - in 的动画序列 */

@keyframes slide - in {

/* 动画开始时（0%）的状态 */

from {

transform: translateX(-100%);

opacity: 0;

}

/* 动画结束时（100%）的状态 */

to {

transform: translateX(0);

opacity: 1;

}

/* 定义元素的初始样式 */

.box {

width: 100px;

height: 100px;

background-color: green;

/* 应用动画：动画名称为 slide - in，动画持续时间为 1 秒，动画播放次数为 1 次，动画播放方向为正常 */

animation: slide - in 1s 1 normal;

}

</style>

</head>

<body>

</body>

</html>

代码解释

● @keyframes 规则的语法为 @keyframes animation - name { keyframe - selector { css - properties } } ，其中：

○ animation - name ：指定动画的名称，用于在 animation 属性中引用。

○ keyframe - selector ：指定关键帧的时间点，可以使用百分比（如 0% 、 50% 、 100% ）或 from （相当于 0% ）和 to （相当于 100% ）。

○ css - properties ：指定在该关键帧时元素的 CSS 属性。

● animation 属性的语法为 animation: name duration timing - function delay iteration - count direction fill - mode play - state; ，其中：

○ name ：指定动画的名称，即 @keyframes 规则中定义的动画名称。

○ duration ：指定动画的持续时间。

○ timing - function ：指定动画的速度曲线。

○ delay ：指定动画的延迟时间。

○ iteration - count ：指定动画的播放次数，可以是具体的数字，也可以是 infinite 表示无限循环。

○ direction ：指定动画的播放方向，如 normal （正常播放）、 reverse （反向播放）等。

○ fill - mode ：指定动画在播放前后元素的样式状态，如 forwards 表示动画结束后保持最后一帧的状态。

○ play - state ：指定动画的播放状态，如 running （正在播放）、 paused （暂停播放）。

通过以上两种方式，你可以在 CSS 中实现各种各样的动画效果，满足不同的设计需求。

上一篇： 5个CSS新功能，简单好用还超省时间
下一篇： BeautifulSoup如何将含有data-tag标签的元素提取出来?

网站首页 > 技术文章 正文

CSS 中实现动画效果的方法_css动画制作

猜你喜欢

网站首页 > 技术文章正文