文章目录
CSS动画详解及代码案例
CSS动画是前端开发中一种强大的技术，它允许我们在不使用JavaScript的情况下创建平滑的过渡和动画效果。通过改变CSS属性，我们可以控制元素的动态外观，如位置、大小、颜色、透明度等。本文将详细介绍CSS动画的全部用法，并通过代码案例进行展示。
一、CSS动画的基本概念
CSS动画主要由两个部分组成：关键帧（Keyframes）和动画属性（Animation Properties）。
-
关键帧（Keyframes）：定义动画的状态和变化。使用
@keyframes规则定义动画的关键帧，关键帧描述了动画在不同时间点的样式。 -
动画属性：控制动画的播放方式和效果。这些属性包括：
animation-name：指定要使用的动画名称。animation-duration：定义动画持续的时间。animation-timing-function：定义动画的速度曲线（如线性、缓动等）。animation-delay：定义动画开始前的延迟时间。animation-iteration-count：定义动画的播放次数（如infinite表示无限循环）。animation-direction：定义动画的播放方向（如normal、reverse、alternate）。animation-fill-mode：定义动画结束后的状态。
二、关键帧动画
关键帧动画允许你在动画序列中定义多个关键帧，从而更精确地控制动画的每一步。
基本语法：
@keyframes animation-name {
from { /* 动画开始时的样式 */ }
to { /* 动画结束时的样式 */ }
}
或者，使用百分比来定义多个关键帧：
@keyframes animation-name {
0% { /* 动画开始时的样式 */ }
50% { /* 动画中间的样式 */ }
100% { /* 动画结束时的样式 */ }
}
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Example</title>
<style>
@keyframes gradientBackground {
0% { background-color: #ff7e5f; }
50% { background-color: #feb47b; }
100% { background-color: #ff7e5f; }
}
body {
animation: gradientBackground 5s ease infinite;
}
</style>
</head>
<body>
<h1>渐变背景颜色动画</h1>
</body>
</html>
这个示例展示了如何创建一个渐变背景颜色的动画效果。
三、动画属性的详细说明
-
animation-name：指定要使用的动画名称。
animation-name: example; -
animation-duration：定义动画的持续时间，可以使用秒（s）或毫秒（ms）。
animation-duration: 2s; /* 2秒 */ -
animation-timing-function：定义动画的速度曲线。
linear：匀速ease：缓动（开始慢，中间快，结束慢）ease-in：加速（开始慢，结束快）ease-out：减速（开始快，结束慢）ease-in-out：先加速后减速
animation-timing-function: ease-in-out; -
animation-delay：定义动画开始前的延迟时间。
animation-delay: 1s; /* 1秒延迟 */ -
animation-iteration-count：定义动画的播放次数，可以是具体的数字或
infinite。animation-iteration-count: 3; /* 播放3次 */ -
animation-direction：定义动画的播放方向。
normal：正常播放reverse：反向播放alternate：交替播放（正向和反向交替）alternate-reverse：反向交替播放
animation-direction: alternate; -
animation-fill-mode：定义动画结束后的状态。
none：默认值，动画结束后不保持样式forwards：保持动画结束时的样式backwards：保持动画开始时的样式both：同时保持开始和结束时的样式
animation-fill-mode: forwards;
四、综合示例
滑动进入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Example</title>
<style>
@keyframes slideIn {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
.slide-in {
animation: slideIn 1s ease-out forwards;
opacity: 0;
}
.slide-in.visible {
animation-delay: 1s;
opacity: 1;
}
</style>
</head>
<body>
<div class="slide-in">滑动进入</div>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
const element = document.querySelector('.slide-in');
setTimeout(() => {
element.classList.add('visible');
}, 1000);
});
</script>
</body>
</html>
这个示例展示了如何使一个元素从右侧滑动进入视图。
闪烁文本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Example</title>
<style>
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.blink-text {
animation: blink 1s linear infinite;
}
</style>
</head>
<body>
<h1 class="blink-text">闪烁的文本</h1>
</body>
</html>
这个示例展示了如何创建一个简单的文本闪烁效果。
标签：动画,定义,关键帧,用法,animation,css,播放,CSS From： https://blog.csdn.net/qq_63447955/article/details/143697340