1.动画的实现步骤
1.定义一个动画 @keyframes
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>Document</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: pink;
/* 使用动画 */
animation: change 1s;
}
/* 1.定义动画：从200变大到600 */
@keyframes change {
/* 1.定义一个动画类名：change*/
from{
/* 从什么状态开始*/
width: 200px;
}
to {
/* 到什么状态*/
width: 600px;
}
}
/* 2.定义动画: 从200到 500*300到 800*500*/
/* 百分比指的是动画总时长的占比 */
@keyframes change {
0%{
width: 200px;
}
50% {
width: 500px;
height: 300px;
}
100%{
width: 800px;
height: 500px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.animation复合属性：
1.动画的名称:animation-name: change;
2.动画的时长: animation-duration: 2s;
3.速度曲线：animation-timing-function: linear;
4.延迟时间： animation-delay: 1s;
5.重复次数：animation-iteration-count: infinite ;
6.动画方向：animation-direction:alternate ;
7.执行完毕时的状态：animation-fill-mode: forwards;
8.动画的播放暂停：一般与:hover一起使用 animation-play-state: paused;
9.连写：animation: change 1s linear 2s infinite alternate forwards（注意：想要测试执行完毕时的状态 得删掉动画的 重复次数和方向）;
10.注意：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>Document</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: pink;
/* 动画：动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态 */
/* 动画名称和动画时长必须赋值-取值不分先后顺序 */
/* 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间 */
animation: change 1s;
/* change 动画名称(自己定义的) 1s 动画的时长 */
animation: change 1s linear;
/* 速度曲线： linear(匀速) */
animation: change 1s steps(3);
/* steps(n) 分步动画 取值多少动画就分成多少段播放 */
animation: change 1s steps(3) 2s;
/* 第一个：1s是动画时长 第二个：2s 是动画延迟时间 */
animation: change 1s steps(3) 2s 5;
/* 5（重复播放5次）动画重复次数 */
animation: change 1s steps(3) 2s infinite;
/* infinite 无限循环 */
animation: change 1s steps(3) 2s infinite alternate;
/* alternate（效果：宽度从200到600 在从600到200） 动画的方向 */
animation: change 1s steps(3) 2s forwards;
/* 执行完毕时的状态 ： 1.backwards(默认值) 2.forwards(动画停留在结束状态) */
/* 注意：想要测试执行完毕时的状态 得删掉动画的 重复次数和方向 */
/* infinite：无限循环 常用 */
/* alternate：（效果：宽度从200到600在从600到200） 常用 */
}
@keyframes change {
from {
width: 200px;
}
to {
width: 600px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
3.animation单独属性：
1.动画的名称:animation-name: 自己定义的名字;
2.动画的时长: animation-duration: 时间 10s;
3.速度曲线：animation-timing-function:
- linear-匀速
- steps（数字）帧数
4.延迟时间： animation-delay: 时间 1s;
5.重复次数：animation-iteration-count:
1.infinite 无限播放
2.（数字）取值多少播放多少次
6.动画方向：animation-direction:alternate ;
1.默认值：normal 先正在正-常用 （正方向播放 播放结束回到初始状态）
2.alternate 先正在反 常用 （正方向播放 在反方向播放回来）
3.reverse 先反在反
4.alternate-reverse 先反在正
7.执行完毕时的状态：animation-fill-mode:
1.forwards 动画停留在结束状态
2.backwards 默认：动画开始时的状态
8.动画的播放暂停：一般与:hover一起使用
- animation-play-state: paused; 暂停动画（鼠标悬停时 暂停动画）
- animation-play-state: running; 播放动画（默认暂停播放鼠标悬停时播放：给播放动画的盒子添加暂停属性 设置鼠标悬停播放动画）
.box:hover {
/* 暂停动画： paused暂停 通常配合:hover 使用 */
animation-play-state: paused;
/* 播放动画： running */
/* animation-play-state: running; */
/* 默认暂停播放鼠标悬停时播放：给播放动画的盒子添加暂停属性 设置鼠标悬停播放动画 */
}
4.逐帧动画：
<!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>Document</title>
<style>
.box {
/* 1680/12 */
width: 140px;
height: 140px;
background-image: url(./images/bg.png);
animation: move 1s steps(12) infinite,run 2s steps(12) forwards;
}
@keyframes move {
from {
background-position: 0 0;
}
to {
background-position: -1680px 0;
}
}
@keyframes run {
/* 动画的开始状态和盒子的默认样式相同的,可以省略开始状态的代码*/
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
</style>
</head>
<body>
<div class="box"></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>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
float: left;
}
ul {
width: 2000px;
animation: move 5s infinite linear;
}
.box {
width: 600px;
height: 112px;
background-color: pink;
overflow: hidden;
}
.box img {
height: 112px;
width: 200px;
vertical-align: middle;
}
/* 定义一个动画： 位移 ul：从右往左 x -1400px */
@keyframes move{
/* form {
transform: translateX(0);
} */
to {
transform:translateX(-1400px);
}
}
/* 当鼠标移入时动画暂停 */
.box:hover ul {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="box">
<!-- ul>li*7>img[src="./images/$.jpg"] -->
<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>
<!-- 3 无缝滚动 技巧
1 两个大盒子
1 外层盒子 设置 眼看宽度和高度
2 里层盒子 用来存放多张图片（里面要存放多少张图片 设置宽度为多少！！ ）
2 真实存放的图片张数 比实际的要多
1 多多少 看你一下的外层盒子能装几张 （浮动）
3 设置动画
1 设置内层盒子的位移 等于 真实的那几张图片的位移！
2 设置动画无线滚动！ -->
</ul>
</div>
</body>
</html>
