CSS 动画允许你在不使用 JavaScript 的情况下创建复杂的动画效果。通过 CSS 动画，你可以控制元素的样式在一段时间内的变化，从而实现平滑的过渡和动态效果。
CSS 动画的基本概念
- 关键帧（Keyframes）：定义动画的各个阶段和样式变化。
- 动画属性（Animation Properties）：控制动画的持续时间、延迟、重复次数等。
实现 CSS 动画的步骤
- 定义关键帧：使用
@keyframes规则定义动画的关键帧。 - 应用动画：使用
animation属性将动画应用到元素上。
示例代码
以下是一个简单的 CSS 动画示例，展示如何使一个元素从左到右移动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 动画示例</title>
<style>
/* 定义关键帧 */
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200px);
}
}
/* 应用动画 */
.box {
width: 100px;
height: 100px;
background-color: lightblue;
animation: slide 2s ease-in-out infinite alternate;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
关键帧（Keyframes）
@keyframes 规则用于定义动画的关键帧。关键帧指定了动画在不同时间点的样式。
语法：
@keyframes animation-name { 0% { /* 初始状态 */ } 50% { /* 中间状态 */ } 100% { /* 结束状态 */ } }示例：
@keyframes slide { 0% { transform: translateX(0); } 50% { transform: translateX(100px); background-color: yellow; } 100% { transform: translateX(200px); background-color: lightgreen; } }
动画属性（Animation Properties）
animation 属性是多个动画属性的简写形式，用于控制动画的行为。
常用属性：
animation-name：指定关键帧的名称。animation-duration：指定动画的持续时间。animation-timing-function：指定动画的速度曲线（如ease、linear、ease-in-out）。animation-delay：指定动画开始前的延迟时间。animation-iteration-count：指定动画的重复次数（如infinite表示无限重复）。animation-direction：指定动画的播放方向（如normal、reverse、alternate）。animation-fill-mode：指定动画执行前后如何应用样式（如forwards、backwards）。animation-play-state：控制动画的播放状态（如running、paused）。
简写语法：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;示例：
.box { animation: slide 2s ease-in-out 1s infinite alternate; }
示例代码
以下是一个更复杂的 CSS 动画示例，展示如何实现一个旋转和颜色变化的动画：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 动画示例</title>
<style>
/* 定义关键帧 */
@keyframes rotateAndChangeColor {
0% {
transform: rotate(0deg);
background-color: lightblue;
}
50% {
transform: rotate(180deg);
background-color: lightcoral;
}
100% {
transform: rotate(360deg);
background-color: lightgreen;
}
}
/* 应用动画 */
.box {
width: 100px;
height: 100px;
background-color: lightblue;
animation: rotateAndChangeColor 4s linear infinite;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
总结
- 关键帧：使用
@keyframes定义动画的各个阶段和样式变化。 - 动画属性：使用
animation属性控制动画的持续时间、延迟、重复次数等。 - 应用动画：将动画应用到元素上，实现平滑的过渡和动态效果。
通过 CSS 动画，你可以创建丰富的视觉效果，提升用户体验，而无需依赖 JavaScript。
学在每日，进无止境！更多精彩内容请关注微信公众号。
原文出处：
内容由AI生成仅供参考，请勿使用于商业用途。如若转载请注明原文及出处。
出处地址：http://www.07sucai.com/tech/758.html
版权声明：本文来源地址若非本站均为转载，若侵害到您的权利，请及时联系我们，我们会在第一时间进行处理。
