1、动画-animation
过渡：实现两个状态间的变化过程
动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
1.1 实现步骤
1.1.1 定义动画
1.1.2 使用动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>动画实现步骤</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: pink;
animation: change 1s;
}
/* 动画一：宽度从200变化到800 */
/* @keyframes change {
from {
width: 200px;
}
to {
width: 800px;
}
} */
/* 动画二：从 200*100 变化到 300*300 变化到800*500 */
/* 百分比：表示的意思是动画时长的百分比 */
@keyframes change {
0% {
width: 200px;
height: 100px;
}
20% {
width: 300px;
height: 300px;
}
100% {
width: 800px;
height: 500px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2、animation属性
提示：
- 动画名称和动画时长必须赋值
- 取值不分先后顺序
- 如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
2.1 animation复合属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>animation复合属性</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: pink;
/* linear：匀速 */
animation: change 1s linear;
/* steps：分步动画，工作中，配合精灵图实现精灵动画 */
animation: change 1s steps(3);
/* 如果有两个时间，第一个是动画时长，第二个是延迟时间 */
animation: change 1s 2s;
/* 重复次数，infinite：无限循环 */
animation: change 1s 3;
animation: change 1s infinite;
/* alternate：反向 */
animation: change 1s infinite alternate;
/* 动画执行完毕时的状态， forwards：结束状态； backwards：开始状态（默认） */
animation: change 1s forwards;
animation: change 1s backwards;
}
/* 宽度 从 200 变化到 800 */
@keyframes change {
from {
width: 200px;
}
to {
width: 800px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.2 animation拆分属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>animation拆分写法</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: pink;
/* 动画名称 */
animation-name: change;
/* 动画时长 */
animation-duration: 1s;
/* 播放次数 */
animation-iteration-count: infinite;
/* animation-play-state: paused; */
}
.box:hover {
/* 暂停动画 */
animation-play-state: paused;
}
/* 宽度从 200 变化到 800 */
@keyframes change {
0% {
width: 200px;
}
100% {
width: 800px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
3、案例-走马灯效果
无缝动画原理：复制开头图片到结尾位置（图片累加宽度=区域宽度）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>走马灯</title>
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
img {
display: block;
width: 200px;
}
.box {
width: 600px;
height: 112px;
border: 5px solid #000;
margin: 100px auto;
overflow: hidden;
}
.box ul {
display: flex;
animation: move 6s infinite linear;
}
/* 定义位移动画；ul使用动画；鼠标悬停暂停动画 */
@keyframes move {
0% {
transform: translate(0);
}
100% {
transform: translate(-1400px);
}
}
.box:hover ul {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="./images/1.jpg" alt="" /></li>
<li><img src="./images/2.jpg" alt="" /></li>
<li><img src="./images/3.jpg" alt="" /></li>
<li><img src="./images/4.jpg" alt="" /></li>
<li><img src="./images/5.jpg" alt="" /></li>
<li><img src="./images/6.jpg" alt="" /></li>
<li><img src="./images/7.jpg" alt="" /></li>
<!-- 替身：填补显示区域的露白 -->
<li><img src="./images/1.jpg" alt="" /></li>
<li><img src="./images/2.jpg" alt="" /></li>
<li><img src="./images/3.jpg" alt="" /></li>
</ul>
</div>
</body>
</html>
4、动画-逐帧动画
核心原理：
- steps()逐帧动画
- CSS精灵图
精灵动画制作步骤
- 准备显示区域
- 盒子尺寸与一张精灵小图尺寸相同
- 定义动画
- 移动背景图（移动距离=精灵图宽度）
- 使用动画
- steps(N)，N与精灵小图个数相同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>精灵动画</title>
<style>
div {
width: 140px;
height: 140px;
border: 1px solid #000;
background-image: url(./images/bg.png);
animation: run 1s steps(12) infinite;
}
@keyframes run {
from {
background-position: 0 0;
}
to {
background-position: -1680px 0;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>5、动画-多组动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多组动画</title>
<style>
div {
width: 140px;
height: 140px;
/* border: 1px solid #000; */
background-image: url(./images/bg.png);
animation:
run 1s steps(12) infinite,
move 3s forwards
;
}
/* 当动画的开始状态样式 跟 盒子默认样式相同，可以省略动画开始状态的代码 */
@keyframes run {
/* from {
background-position: 0 0;
} */
to {
background-position: -1680px 0;
}
}
@keyframes move {
/* 0% {
transform: translate(0);
} */
100% {
transform: translate(800px);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
