1. CSS 动画的基本概念
CSS 动画主要由两个部分组成：
- 关键帧（Keyframes）：定义动画的状态和变化。
- 动画属性：控制动画的播放方式和效果。
2. 定义关键帧
使用
@keyframes
规则定义动画的关键帧。关键帧描述了动画在不同时间点的样式。
基本语法：
@keyframes animation-name {from {/* 动画开始时的样式 */}to {/* 动画结束时的样式 */}}
你也可以使用百分比来定义多个关键帧：
@keyframes animation-name {0% {/* 动画开始时的样式 */}50% {/* 动画中间的样式 */}100% {/* 动画结束时的样式 */}}
3. 应用动画
要将动画应用到元素上，需要使用以下属性：
- **
animation-name**：指定要使用的动画名称。 - **
animation-duration**：定义动画持续的时间。 - **
animation-timing-function**：定义动画的速度曲线（如线性、缓动等）。 - **
animation-delay**：定义动画开始前的延迟时间。 - **
animation-iteration-count**：定义动画的播放次数（如infinite表示无限循环）。 - **
animation-direction**：定义动画的播放方向（如normal、reverse、alternate）。 - **
animation-fill-mode**：定义动画结束后的状态。
示例：
@keyframes example {from {transform: translateX(0);opacity: 0;}to {transform: translateX(100px);opacity: 1;}}.box {width: 100px;height: 100px;background-color: #3498db;animation-name: example; /* 指定动画名称 */animation-duration: 2s; /* 动画持续时间 */animation-timing-function: ease; /* 动画速度曲线 */animation-delay: 0s; /* 动画延迟时间 */animation-iteration-count: infinite; /* 无限循环 */animation-direction: alternate; /* 交替播放 */}
4. 动画属性的详细说明
4.1
animation-name
指定要使用的动画名称。
animation-name: example;
4.2
animation-duration
定义动画的持续时间，可以使用秒（s）或毫秒（ms）。
animation-duration: 2s; /* 2秒 */
4.3
animation-timing-function
定义动画的速度曲线。常用的值包括：
linear：匀速。ease：缓动（开始慢，中间快，结束慢）。ease-in：加速（开始慢，结束快）。ease-out：减速（开始快，结束慢）。ease-in-out：先加速后减速。
animation-timing-function: ease-in-out;
4.4
animation-delay
定义动画开始前的延迟时间。
animation-delay: 1s; /* 1秒延迟 */
4.5
animation-iteration-count
定义动画的播放次数，可以是具体的数字或
infinite
。
animation-iteration-count: 3; /* 播放3次 */
4.6
animation-direction
定义动画的播放方向。
normal：正常播放。reverse：反向播放。alternate：交替播放（正向和反向交替）。alternate-reverse：反向交替播放。
animation-direction: alternate;
4.7
animation-fill-mode
定义动画结束后的状态。
none：默认值，动画结束后不保持样式。forwards：保持动画结束时的样式。backwards：保持动画开始时的样式。both：同时保持开始和结束时的样式。
animation-fill-mode: forwards;
5. 动画示例
以下是一个简单的 CSS 动画示例，展示一个方块从左到右移动并逐渐变透明。
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 动画 示例</title><style>@keyframes move {from {transform: translateX(0);opacity: 1;}to {transform: translateX(300px);opacity: 0;}}.box {width: 100px;height: 100px;background-color: #3498db;animation: move 2s ease-in-out infinite; /* 应用动画 */}</style></head><body><div class="box"></div></body></html>
6. 过渡效果
CSS 过渡是另一种创建动画效果的方式，主要用于在属性值变化时实现平滑过渡。与动画不同，过渡通常用于单一属性的变化。
基本语法：
.element {transition: property duration timing-function delay;}
示例：
.box {width: 100px;height: 100px;background-color: #3498db;transition: background-color 0.5s ease; /* 定义过渡效果 */}.box:hover {background-color: #2ecc71; /* 鼠标悬停时改变背景颜色 */
本文转载自: https://blog.csdn.net/xiaowei0016/article/details/140770072
版权归原作者 大手子唐可可 所有， 如有侵权，请联系我们删除。
版权归原作者 大手子唐可可 所有， 如有侵权，请联系我们删除。