文章详细介绍了如何使用CSS实现动画效果，包括定义动画帧、添加动画属性如animation-name、animation-duration等。此外，还探讨了Flex布局的概念，如弹性盒子、弹性项目、主轴和侧轴的设置，以及justify-content、align-items等属性用于控制元素的排列方式。最后提到了animatecss插件的使用和弹性项目的拉伸与压缩特性。
一、动画
实现动画效果需要进行两个步骤：定义动画帧以及添加动画相关属性
1、定义动画帧
1）from（动画第一帧）to（动画最后一帧）
@keyframes animat{
from{css}
to{css}
}
表示定义动画的名字为animat，设置动画的第一帧和最后一帧
2）0%（动画第一帧）？%（动画中间的一帧）100%（动画最后一帧）
@keyframes animat{
0%{css}
?%{css}
100%{css}
}
表示定义动画名称为animat，设置动画的第一帧、动画中间的某一帧、动画的最后一帧，这里的？%是一个百分比数字，代表动画过程中的某一帧，可以加任意数量的过程中的帧
2、动画相关属性 animation
1）animation-name 动画名称
a.代码示例：
animation-name: animat;
表示动画名称为animat
b.注意：
这里的动画名称和定义动画帧中的名称存在对应关系，需要什么样的动画效果就得加对应的动画名称
2）animation-duration 动画持续时间
a.代码示例：
animation-duration: 4s;
动画持续时间为4s
b.注意：
动画持续时间的取值为时间单位
3）anmation-delay 动画延迟
a.代码示例：
animation-delay: 3s;
动画延迟3s启动
b.注意：
动画延迟的取值为时间单位
4）animation-fill-mode 动画结束位置
a.代码示例：
animation-fill-mode: backwards;
动画结束后回到起点
animation-fill-mode: forwords;
动画结束后停留在终点
b.注意：
animation-fill-mode属性的属性值默认为backwords
5）animation-iteration-count 动画执行次数
a.代码示例：
animation-iteration-count: 6;
动画执行6次
animation-iteration-count: infinite;
动画无限次数执行
b.注意：
animation-iteration-count属性取值为次数（自然数）、infinate不限次数
6）animation-timing-function 动画函数（动画速度）
a.代码示例：
animation-timing-function: step(5);
动画的步长为5
animation-timing-function: linear;
动画匀速
animation-timing-function:ease;
动画以舒适的方式执行
b.注意：
animation-timing-function属性和transform-timing-function属性类似
7）animation-direction 动画执行方向
a.代码示例：
animation-direction: alternate;
0%--100%,0%--100%,0%--100%...
animation-direction: reverse;
100%--0%,100%--0%,100%--0%...
animation-direction: alternate;
100%--0%--100%--0%--100%...
8）animation-play-state 动画播放状态
a.代码示例：
animation-play-state: paused;
停止执行动画
animation-play-state: running;
执行动画
9）animation属性简写【简写】
a.代码示例：
animation:animat 1s 2s infinite alternate-reverse linear;
设置动画属性，动画名称animat，动画持续时间1s，动画延迟2s，动画无限次数执行，动画执行从100%--0%--100%--0%...匀速执行动画
3、使用animatecss插件
在animatecss官网（https://animate.style/）上有很多已经写好的动画效果，学会使用插件能够方便很多
1）使用插件的方法：
先从animatecss官网上下载animate.css文件，使用link标签引入css文件至当前html文件中，需要使用某个动画效果时，在对应的元素类中添加animate_animated以及animate_具体动画名称
2）注意：
该方法不能同时使用两种动画效果，因为动画名称写在后面的会覆盖掉前面的，因此前面的动画不生效
二、flex 弹性布局
1、什么是弹性盒子和弹性项目
当前元素开启了弹性布局之后，这个元素就被称为弹性盒子，子元素（不是后代元素）被称为弹性项目，弹性盒子和弹性项目都不会脱离文档流，弹性项目默认会沿着主轴方向排列
2、给当前元素开启弹性布局
1）display: flex;
2）注意：
开启弹性布局之后，弹性盒子和弹性项目不再区分块和行内，因此可以使用开启弹性布局的方式解决行内元素无法变换（transform）的问题
3、主轴和侧轴
开启弹性布局之后会生成两个轴，一个是主轴，另一个是侧轴
4、flex-direction 改变主轴方向
1）代码示例：
flex-direction: row;
主轴方向为从左到右
flex-direction: row-reverse;
主轴方向为从右到左
flex-direction: column;
主轴方向从上到下
flex-direction: column-reverse;
主轴方向从下到上
2）注意：
这个属性是给弹性盒子设置的！！！
5、justify-content （弹性项目在）主轴方向的排列方式
1）代码示例：
justify-content: flex-start;
主轴方向上，从弹性盒子起点位置开始紧密排列，图示：
[item item item item------]
justify-content: flex-end;
主轴方向上，从弹性盒子结束位置开始紧密排列，图示：
[------item item item item]
justify-content: center;
主轴方向上，从弹性盒子居中位置紧密排列，图示：
[---item item item item---]
justify-content: space-between;
将主轴上多余的空间均匀分配到盒子中间，实现相邻弹性项目之间距离相同，左右两端对齐，图示：
[item--item--item--item]
justify-content: space-around;
将主轴上多余的空间均匀分配给每个弹性项目，每个弹性项目再将被分配的距离平均放在自身的左右两边，图示：
[-item--item--item--item-]
justify-content: space-evenly;
将主轴上多余的空间均匀分配到相邻的子项目之间，以及开始弹性项目的左边，结束弹性项目的右边，图示：
[--item--item--item--item--]
2）注意：
这个属性是给弹性盒子设置的！！！
6、主轴方向换行
当子弹性项目（在主轴方向）的总宽度超过了弹性盒子（在主轴方向）的宽度时会产生压缩，主轴方向换行可以解决压缩现象
1）flex-wrap 弹性换行属性
a.代码示例：
flex-wrap: nowrap;
不换行（默认）
flex-wrap: wrap;
换行（当子弹性项目在主轴方向的总宽度超过弹性盒子在主轴方向宽度的时候会换行）
flex-wrap: wrap-reverse;
换行（当子弹性项目在主轴方向的总宽度超过弹性盒子在主轴方向宽度的时候会换行）且反转侧轴的方向！！！
2）注意：
这个属性是给弹性盒子设置的！！！
3）主轴换行和改变主轴方向连写结合【了解】
代码示例：
flex-flow:wrap row-reverse;
表示主轴换行，主轴方向为从下到上
7、align-items （弹性项目在）侧轴方向的排列方式--针对单行
1）代码示例：
align-items:flex-start;
从侧轴起点位置对齐
align-items:flex-end;
从侧轴结束位置对齐
align-items:center;
从侧轴中间位置对齐
align-items:stretch;
沿侧轴方向拉伸，如果给定了弹性项目高度会失效（默认）
2）注意：
这个属性是给弹性盒子设置的！！！
8、水平垂直居中方案（补充）
代码示例：
display：flex;
justify-content: center;
align-items: center;
给当前元素开启弹性布局，使其子弹性项目在主轴上居中，在侧轴上居中
9、align-content （弹性项目在）侧轴方向的排列方式--针对多行
1）代码示例：
align-content:flex-start;
侧轴方向上，从弹性盒子起点位置开始紧密排列
align-content:flex-end;
侧轴方向上，从弹性盒子结束位置开始紧密排列
align-content:center;
侧轴方向上，从弹性盒子居中位置紧密排列
align-content:space-between;
将侧轴上多余的空间均匀分配到盒子中间，实现相邻弹性项目之间距离相同，上下两端对齐
align-content:space-round;
将侧轴上多余的空间均匀分配给每个弹性项目，每个弹性项目再将被分配的距离平均放在自身的上下两边
align-content:space-evenly;
将侧轴上多余的空间均匀分配到相邻的子项目之间，以及开始弹性项目的下边，结束弹性项目的上边
align-content:stretch;
侧轴方向上，将剩余的空间均匀分配到每个弹性项目的下边，如果弹性项目没有设置侧轴方向的尺寸，就会拉伸
2）注意：
这个属性是给弹性盒子设置的！！！
10、弹性项目的拉伸
1）flex-grow 弹性项目在主轴上的拉伸
a.代码示例：
flex-grow:1;
表示该弹性项目拉伸（具体拉伸距离由拉伸占比决定，拉伸份额由数值和该弹性项目在主轴的尺寸乘积决定）
flex-grow:0;
表示该弹性项目不参与拉伸
2）注意：
a.具体拉伸的距离是按比例分配的，拉伸不写默认为0
b.该属性是给子弹性项目设置的！！！
11、弹性项目的压缩
1）flex-shrink 弹性项目在主轴上的压缩
a.代码示例：
flex-shrink:0;
表示该弹性项目不参与压缩
2）注意：
a.压缩和拉伸类似，都是按比例分配的，但压缩属性默认为1（参与压缩），拉伸属性默认为0（不参与拉伸）
b.子弹性项目总尺寸超出父弹性盒子尺寸就可以压缩，但如果设置了行高属性会失效！！！
b.压缩属性是给子弹性项目设置的！
12、align-self （弹性项目在）侧轴方向的排列方式--针对单个弹性项目
1）代码示例：
align-self:flex-start;
从侧轴起点位置对齐
align-self:flex-end;
从侧轴结束位置对齐
align-self:center;
从侧轴中间位置对齐
align-self:stretch;
沿侧轴方向拉伸，如果给定了弹性项目高度会失效（默认）
2）注意：
align-self属性是给子弹性项目设置的（而align-items和align-content是给父弹性盒子设置的）！！！
13、flex-basis 弹性项目基础尺寸（主轴方向）
1）代码示例：
flex-basis:300px;
在主轴方向上，设置该弹性项目的基础尺寸为300px
2）注意：
a.在主轴方向上设置基础尺寸，会覆盖该弹性项目原本的尺寸
b.flex-basis属性是给子弹性项目设置的！！！
14、flex在子弹性项目里的简写【简写】
1）代码示例：
flex: 1 1 300px;
设置子弹性项目的flex属性，拉伸，压缩，基础尺寸300px
2）注意：
书写顺序不能错乱！！！
1154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
