动画

动画 发生 ，可以 不需要 任何 触发条件
学习视频https://www.bilibili.com/video/BV1p84y1P7Z5?spm_id_from=333.788.videopod.episodes&vd_source=4c2cfb7ec03f0b7933d90ded13a27146&p=182
应用动画到元素animation-duration:3s
动画持续的时间animation-duration:3s
动画延迟animation-delay:0.5s

动画定义方式：方式一简单款
@keyframes 动画名{
from{
//开始
xxxxx
}
to{
//结束
yyyy
}
}
方式二完整详细款
@keyframes 动画名{
0%{}
10%{}
.....
100%{}
}
方式三混合款 百分比和from 、to混着写「不建议」

其他属性
设置动画的方式：animation-timing-function:贝塞尔曲线、快慢、慢快、、、、、、和过渡的可选值是一样的
动画播放的次数：animation-iteration-count:3
修改动画的方向：
animation-direction: normal (默认值) | reverse (反转)| alternate（往复运动，就是来回动，当动画播放次数只有一次，这个属性将被自动放弃）、、、、其他请参考使用手册
动画意外的状态（不发生动画的时候在哪里）：animation-fill-mode:forwards最后一帧在哪里，就停在哪里
初试第一帧的状态：animation-fill-mode:backwards
动画播放的状态：animation-play-state: paused(暂停)

在设置 动画 复合属性 的 时候 ，只设置 一个 时间 ，表示 duration, 设置 两个 时间 分别是 :duration 和 delay,其他 的 属性 没有 顺序 要求
.inner{
animation: atguigu(动画名自定义 ) 3s 0.5s linear 2 alkternate-reverse forwards.
}
animation-play-state一般 单独 使用
参考 ：
例子：
inner{
width:100px;
height:100px;
background:pink;
animation: atguiugu(动画名自定义) 3s 0.5s linear 2 alternate-reverse forwards
}
.box:hover .inner{
animation-play-state:paused
}