三分钟！教你学会动画类的样式
有关动画类的样式，主要有transform、transition、animation三种，其中transform是负责静态的，在一些位移，大小方面的变化；transition是让动画的变化过程是可见的，而animation就是负责动画的动态。
① 旋转 ：rotate:(3deg）正值是顺时针旋转，负值是逆时针;旋转之后，坐标系也跟着旋转了
② 位移 ： translate:（x,y）坐标原点在窗口的左上角
③ 缩放 ：scale:(0,0)
缩放中要注意两个地方：
第一是 倍数 。倍数在0-1之间是缩小，倍数大于1时是放大
第二是 值的个数 。一个值代表等比例缩放，两个代表非等比例缩放
④斜切：skew(20deg)
①显示模式 ：对显示模式为行内标签的无效，如果需要对显示模式是行内模式的标签设置这个样式，可以通过下面两种方法
方法一 ：通过 display : inline-black/black转换显示模式
方法二 ：通过 position ：relative/absolute 设置定位方式，这两种定位方式的显示模式都不是行内模式
②占位特点 ：标签在转换之后还是占有原来的位置
③多属性 ：多个属性同时写，顺序不一样，效果也不一样
① 第一个值：样式 ，all代表所有样式，还可以是单个样式
② 第二个值：过渡所需要的时间
③ 第三个值 ：变化的 速度
linear 匀速
ease 慢速
ease-in 慢开始
ease-out 慢结束
esae-in-ouy 慢开始和结束
④ 第四个值：延迟开始的时间
①数值个数 ：可以同时写多个数值，数值之间用逗号隔开
②书写位置 ：写在原来的样式中，而不是变化之后的样式
将transform和transition结合成一个综合的例子如下：
@keyframes 动画名
{
状态1{
样式...
}
状态2{
样式...
}
..........
}
① 在所需要的标签内使用样式 animation:move 2s infinite 0s
② 样式值
第一个值： 动画名
第二个值：动画持续的 时间
第三个值：动画持续的 次数 。默认是1次，可以通过 infinite 设置无限循环
第四个值：动画变化的 速度
① 动画的每个状态 变化 都是相对初始位置发生改变的
② 要回到原来的位置时，一定0%和100%的状态要一样
以上就是本章讲解的三个关于动画类的样式。希望大家在学习CSS的道路上一路顺畅
