动画-animation
动画-animation与 transition过渡动画的区别
- transition过渡动画：实现两个状态间的变化过程
- 动画animation：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
实现动画animation的步骤:
1.定义动画的关键帧：使用 @keyframes 规则定义动画在不同阶段的样式。
@keyframes:
@keyframes 是用来指定 CSS 动画过程中，在特定时间点需要应用的样式规则。你可以在 @keyframes 内部定义动画序列中的关键帧（即动画的不同状态），然后浏览器会自动计算这些关键帧之间的过渡效果。
动画名称：
是用于标识这个动画的唯一名称，以便于在其他地方引用它。
这种格式只指定了动画的起点(from)和终点(to)的状态。
@keyframes 动画名称 {
from { width: 200px; }
to { width: 800px; }
}
这种格式允许你更精确地控制动画过程中不同百分比处的状态，提供了更高的灵活性和控制力。
@keyframes 动画名称 {
0% { /* 起始状态 */ }
20% { /* 中间某个时刻的状态 */ }
...
100% { /* 结束状态 */ }
}
2.应用动画到元素上：通过 animation 属性将定义好的动画应用到特定的 HTML 元素上，并设置相关的属性如持续时间、播放次数等。
animation: animation-name 动画名称 animation-duration 动画时长 animation-timing-function 速度曲线 animation-delay 延迟时间 animation-iteration-count 重复次数 animation-direction 动画方向 animation-fill-mode; 执行完毕时状态 animation:动画名称 动画花费时长;注意:
- 动画名称和动画时长必须赋值
- 取值不分先后顺序
- 如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
属性 作用 取值 animation-name 动画名称
定义要使用的 @keyframes 动画名称
animation-duration 动画时长
动画完成一个周期所需的时间（如 2s）
animation-delay 延迟时间
动画开始前的延迟时间（可为负值）
animation-fill-mode 动画执行完毕时的状态
none（不保留任何样式）
forwards（保留最后一帧样式）
backwards（保留第一帧样式）
both（同时保留首尾帧样式）animation-timing-function 动画的速度曲线（缓动函数），如 ease, linear, ease-in-out
ease（默认）
steps(数字)：逐帧动画
linear 匀速
ease-in
ease-out
ease-in-out : 动画开始和结束时较慢，中间较快animation-iteration-count 动画重复播放次数
（如 1, infinite 表示无限循环）
infinite为无限循环 animation-direction 动画执行方向
normal（默认，正常播放）
reverse（倒序播放）
alternate（正向播放完后反向播放）
alternate-reverse（反向播放完后正向播放）animation-play-state 暂停动画 paused为暂停，
通常配合:hover使用
动画animation各种使用情况案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
/* 给动画元素定义基础样式 */
.box {
background-color: #4CAF50; /* 绿色背景 */
width: 200px; /* 初始宽度 */
height: 100px; /* 固定高度 */
margin: 50px auto; /* 居中显示 */
/*transition: width 2s ease; 添加过渡效果（非必须） */
}
/* 定义动画的关键帧 */
@keyframes 扩展宽度 {
from { /* 动画开始时的样式 */
width: 200px;
}
to { /* 动画结束时的样式 */
width: 800px;
}
}
.animated-box:hover{
animation: 扩展宽度 5s;
/* linear：匀速 */
animation: 扩展宽度 5s linear;
/* steps：分步动画，工作中，配合精灵图实现精灵动画 */
/* 我们这里是单纯的逐帧动画 这里没有精灵图片 */
animation: 扩展宽度 5s steps(13);
/* 如果有两个时间，第一个是动画时长，第二个是延迟时间 */
animation: 扩展宽度 3s 5s;
/* 重复次数，infinite：无限循环 */
animation: 扩展宽度 3s 3;
animation: 扩展宽度 3s infinite;
/* alternate：反向 */
animation: 扩展宽度 3s infinite alternate;
/* 动画执行完毕时的状态， forwards：结束状态； backwards：开始状态（默认） */
animation: 扩展宽度 3s forwards;
animation: 扩展宽度 3s backwards;
}
/* 动画二：从 200*100 变化到 300*300 变化到800*500 */
/* 百分比：表示的意思是动画时长的百分比 */
@keyframes 扩展宽度2 {
0% {
width: 200px;
height: 100px;
}
20% {
width: 300px;
height: 300px;
}
100% {
width: 800px;
height: 500px;
}
}
/* 定义关键帧动画 */
@keyframes 扩展宽度3 {
0% {
transform: translateX(0) scale(1); /* 初始位置和大小 */
background-color: lightblue;
}
50% {
transform: translateX(200px) scale(1.2); /* 中间放大并右移 */
background-color: lightgreen;
}
100% {
transform: translateY(100PX) scale(1.5); /* 下移放大 */
background-color: lightcoral;
}
}
.animated-box2:hover{
animation: 扩展宽度2 5s;
}
/* 应用动画到元素上 */
.animated-box3:hover{
animation-name: 扩展宽度3; /*使用的动画名称为 扩展宽度3 */
animation-duration: 5s; /* 动画持续时间5s */
animation-timing-function: ease-in-out; /* 动画速度曲线 */ /* 动画开始和结束时较慢，中间较快 */
animation-delay: 3s; /* 延迟3秒后开始动画 */
animation-iteration-count: 3; /* 动画重复播放3次 */
animation-direction: alternate; /* 动画在正向和反向之间交替 */ /* 第一次正向播放，第二次反向播放，第三次再正向播放 */
animation-fill-mode: forwards; /* 动画结束后保持最后一帧样式 */
}
/* 使用animation
你可以将所有动画属性合并成一行：
这样更简洁，但建议初学者先分开写，便于理解和调试。 */
.animated-box4:hover{
animation: 扩展宽度3 5s ease-in-out 3s 3 alternate forwards;
}
</style>
</head>
<body>
<!-- 创建一个div元素用于应用动画 -->
<div class="box animated-box" >
<!-- 这个div内部可以放置任何内容，这里为空 -->
</div>
<div class="box animated-box2" >
<!-- 这个div内部可以放置任何内容，这里为空 -->
</div>
<div class="box animated-box3" >
<!-- 这个div内部可以放置任何内容，这里为空 -->
</div>
<div class="box animated-box4" >
<!-- 这个div内部可以放置任何内容，这里为空 -->
</div>
<div class="box animated-box5" >
<!-- 这个div内部可以放置任何内容，这里为空 -->
</div>
</body>
</html>逐帧动画steps()+精灵图片的结合使用
精灵动画制作步骤:
1.准备显示区域
- 元素盒子尺寸大小与一张精灵小图尺寸相同
2.定义动画
- 移动背景图（移动距离=精灵图宽度）
3.使用逐帧动画steps()
- steps(N)，N与精灵小图个数相同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
/* 给动画元素定义基础样式 */
div {
/* 元素盒子尺寸大小与一张精灵小图尺寸相同 */
/* width: 140px; */
width: 1680px;
height: 140px;
border: 1px solid #000;
background-image: url(./images/bg2.png);
}
@keyframes runing {
from {
background-position: 0 0; /* 0 0 在精灵图的第一个位置 */
}
to {
background-position: -1680px 0; /* -1680px 0 到精灵图的第12个位置 */
}
}
div:hover{
/* steps(12) N=12与精灵小图个数12相同 */
animation: runing 3s steps(12) infinite;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
多组动画组合
animation:
动画1，
动画2，
动画N
animation:
run 1s steps(12) infinite,
move 3s linear forwards;多组动画组合案例:
animation:
runing 1s steps(12) infinite,
move 3s 12s forwards;
runing 1s steps(12) infinite :先让精灵图片 逐帧动起来 这样动画持续12s后
让 精灵图片 沿X轴向右平移1680px (3s内完成平移)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
/* 给动画元素定义基础样式 */
div {
/* 元素盒子尺寸大小与一张精灵小图尺寸相同 */
width: 140px;
/* width: 1680px; */
height: 140px;
border: 1px solid #000;
background-image: url(./images/bg2.png);
}
@keyframes runing {
from {
background-position: 0 0; /* 0 0 在精灵图的第一个位置 */
}
to {
background-position: -1680px 0; /* -1680px 0 到精灵图的第12个位置 */
}
}
@keyframes move {
0% {
transform: translate(0);
}
100% {
transform: translate(1680px);
}
}
/*
runing 1s steps(12) infinite :先让精灵图片 逐帧动起来 这样动画持续12s后
让 精灵图片 沿X轴向右平移1680px (3s内完成平移)
*/
div:hover{
/* steps(12) N=12与精灵小图个数12相同 */
animation: runing 1s steps(12) infinite,
move 3s 12s forwards;
}
</style>
</head>
<body>
<div></div>
</body>
</html> 
