CSS基础3
动画-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> 
