动画
1.动画的基础练习
animation: ai 5s：动画单词，动画名字，动画时长，缺一不可。
定义动画名字和书写关键帧：
@keyframes ai {
/* 关键帧：定义开始和结束的变化，你可以随意改变里面的样式，还有百分比写法，比如0%代表from，还有15%，30%，这样类推，100%代表to */
from {
background-color: red;
width: 500px;
font-size: 20px;
}
to {
background-color: yellow;
height: 300px;
}
}
2.动画的单写
1.animation-name 设置动画的名称 @keyframes 起名字 设置关键帧
2.animation-duration 设置动画的播放时间 （数字加 s 就是秒的意思）
3.animation-timing-function 设置动画的速度曲线 linear 匀速 steps() 逐帧动画 用背景图显示，是几个图括号里面输入几，背景图移动就要用背景图的移动方式 background-position: 0 0;
- animation-delay 设置动画的延迟时间 直接用数字加s表示 （注意要写在动画的播放时间的后面，不然 会被默认为播放时长）
- .animation-iteration-count 播放次数 直接数字表示即可 infinite表示无限循环
- .animation-direction 设置动画的方向 normal 默认值 先正再正 altemate 先正再反（常用）
- .animation-fill-mode 设置延迟状态和结束状态 backword 设置延迟时间内元素变成第一帧的画面 forwords 设置动画结束后 停留最后一帧
- .animation-play-state 设置动画播放还是暂停 running 播放 默认值 paused 暂停
3.动画播放的方向
4.动画暂停
/* 当鼠标移入时动画暂停 */
div:hover {
/* paused:暂停 */
running ：播放
/* 动画暂停单写 */
animation-play-state: paused;
}
5.动画的播放速度
默认 ease 一般用 linear 匀速播放
6.速度曲线
案例：精灵动画
<!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>
div {
width: 140px;
height: 120px;
/* border: 1px solid #000; */
background-image: url(./bg.png);
/* 背景图一帧一帧的动，总共12帧 ，因为背景图是无限循环，所有盒子停了背景图还在跑*/
animation: qr 2s steps(12) infinite,
/* 复合写法加逗号隔开，让盒子四秒内跑完，匀速移动，停留在最后一帧 */
box 4s linear forwards;
}
/* 背景图一帧一帧的动形成动画效果 */
@keyframes qr {
to {
background-position: 1680px 0;
}
}
/* 盒子一起动，让人感觉背景图在跑 */
@keyframes box {
to {
transform: translateX(800px);
}
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
案例：跑马灯轮播图
1.技巧：
1 静态 html结构 box 显示 边框 里面 大的div 存放多个小图片 后期移动的时候 只移动装着小图片的盒子就行
2 动态效果 1 inner盒子 从右往左移动
3 无缝滚动 技巧 1 两个大盒子 1 外层盒子 设置 眼看宽度和高度 2 里层盒子 用来存放多张图片（里面要存放多少张图片 设置宽度为多少！！ ） 2 真实存放的图片张数 比实际的要多 1 多多少 看你一下的外层盒子能装几张 （浮动） 3 设置动画 1 设置内层盒子的位移 等于 真实的那几张图片的位移！ 2 设置动画无线滚动！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>index.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 1440px;
height: 270px;
background-color: aqua;
margin: 200px auto;
overflow: hidden;
}
.inner {
/* 需要加上三张图片的宽度 */
width: 4800px;
height: 270px;
animation: move 3s linear infinite;
}
@keyframes move {
100% {
transform: translateX(-3360px);
}
}
img {
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="inner">
<img src="./images/1.jpg" alt="" />
<img src="./images/2.jpg" alt="" />
<img src="./images/3.jpg" alt="" />
<img src="./images/4.jpg" alt="" />
<img src="./images/5.jpg" alt="" />
<img src="./images/6.jpg" alt="" />
<img src="./images/7.jpg" alt="" />
<!-- 技巧 故意增加前面张三张图片下去 -->
<img src="./images/1.jpg" alt="" />
<img src="./images/2.jpg" alt="" />
<img src="./images/3.jpg" alt="" />
</div>
</div>
</body>
</html>
<!--
1 静态 html结构
box 显示 边框 里面 大的div 存放多个小图片 后期移动的时候 只移动装着小图片的盒子就行
2 动态效果
1 inner盒子 从右往左移动
3 无缝滚动 技巧
1 两个大盒子
1 外层盒子 设置 眼看宽度和高度
2 里层盒子 用来存放多张图片（里面要存放多少张图片 设置宽度为多少！！ ）
2 真实存放的图片张数 比实际的要多
1 多多少 看你一下的外层盒子能装几张 （浮动）
3 设置动画
1 设置内层盒子的位移 等于 真实的那几张图片的位移！
2 设置动画无线滚动！！
-->
拓展问答
问：你如何知道一个css属性有没有兼容性呢？
答： can i use ，在程序里面输入该属性
