2D形变和3D形变；过渡动画和关键帧动画

2D形变

2D形变包含的内容是
1.平移
2.旋转
3.缩放
4.拉伸（倾斜）
注意：
1.行元素不能形变，img和input除外
2.仅仅是元素形状的变化，文档流的空间并没有变化

设置形变使用transform属性
平移使用translate
1.水平方向平移 translateX(num) num是具体值，正数向右平移，负数向左平移
2.垂直方向平移 translateY（num） num是具体值，正数向下平移，负数向上平移
3.复合写法 translate(x,y)
旋转使用rotate（度数） 度数的单位是deg
度数为正，顺时针旋转
度数为负，逆时针旋转
*形变的层级，后来者居上
使用transform-origin属性，设置形变的参考点，默认值是center center
transform-origin：x轴方向的位置 y轴方向的位置
值：
1.具体的数值
2.left top bottom right center等方向名词的组合，如果只写一个，则另一个默认是center
使用缩放scale(x轴方向的倍数 y轴方向的倍数)
如果x轴和y轴缩放倍数相同，则可以只写一个
scale(n)

如果需要把形变组合在一起
transform: scale(2) rotate(180deg) translate(30px 50px);
设置倾斜 skew()
写法和translate一样，分为x轴拉伸，y轴拉伸和符合写法
skewX(n+deg) 元素倾斜，就是元素和y轴的夹角为n度
X轴的度数为正，向左倾斜
X轴度的数为负，向右倾斜
Y轴同理
注意，度数不能是90度，使用复合写法，他们的合不能为90度

3D形变

设置3D环境
perspective：景深
他的默认值是 none，需要把景深设置再3D环境的父级上
它的值是具体的数值，不可以是百分比，因为z轴没有百分比，也不能是0或者负值

使用transform-style 设置3D效果
默认值是flat ，表示2D
preserve-3D 表示3D

使用perspective-origin 设置透视点的位置
1.可以是left top bottom right center等方位名词的组合
2.可以是具体数值
3.可以是百分比

perspective-origin：x轴的位置 y轴的位置

以上三个关于3D设置的属性都设置在3D环境的父级上

平移 可以使用translate3d（x,y,z）;
也可以单独使用translate（z）

3D平移和旋转

3D旋转
分开写法
rotateX(num):num为正，以上边为基准，上边往视窗的里面翻转，num为负，上边往视窗的外面翻转
rotateY(num)：num为正，以左边为基准，左边往视窗的外面翻转，num为负，左边往视窗的里面翻转
rotateZ(num)
合写：
rotate3d(x倍数,y倍数,z倍数)
rotate3d(1,2,3,40deg)
x轴旋转40度，y轴旋转80度，z轴旋转120度

查看元素从后面看能否看到元素的内容
backface-visibility
值：
1.visible 默认值，能看到
2.hidden 不能看到

过渡动画

如果同时设置平移和缩放，有两种方式
1.先写平移，然后再缩放，他的结果是 先平移到具体位置，然后在该位置执行缩放
2.先写缩放，然后再平移，他的结果是先把所有的值进行缩放，然后按照缩放后的值平移
一般都用第一种的写法

过度动画，设置元素从一种状态达到另一种状态的动画效果
设置属性是 transition

transition-property 设置需要过度的css属性，如果有多个属性需要过度，则可以用英文逗号分开，也可以直接设置all，all表示所有变化的css属性都需要过度，如果不设置该属性，默认为all
transition-duration 设置过渡动画的持续时间，单位是s秒
transition-delay 设置过渡动画的延迟时间，动画开始的时候有，结束的时候也有延迟
transition-timing-function 设置动画的变化曲线
ease 默认值，先快后慢
linear 匀速运动
ease-in 淡入效果，先快后慢
ease-out 淡出效果，先匀速，再快，再慢
ease-in-out 淡入淡出，两边慢，中间快
以上均属于贝塞尔曲线中的特殊曲线

过渡动画也可以合写:
transition：property duration timing-function delay
后面两个可以省略，直接设置默认值

过渡动画的出发时机
过渡动画不会主动触发
触发方式
1.通过伪类出发 hover focus targeted
2.媒体查询
3.通过js触发

关键帧动画

关键帧动画和过渡动画的区别
1.关键帧动画的触发时机是，只要添加关键帧动画，就会立即执行动画
2.关键帧动画可以对动画的流程进行控制

关键帧动画的使用流程
1.先封装一组关键帧动画，使用关键字 @keyframes
2.给需要设置动画的元素，添加动画属性

设置动画名称
animation-name：通过@keyframes 声明的名称
设置动画的持续时间
duration：10s；

以上两个属性不能省略

设置动画的运动函数
animation-timing-function：值和过度函数一致，都是贝塞尔曲线设置的函数

设置动画的延迟时间
animation-delay：10s；

设置动画的重复次数
animation-iteration-count：num；
值是一个正整数，表示次数，默认为1次，也可以是infinite，表示无限次

设置动画的方向
animation-direction：
值：
normal 默认值，正方向运行
reverse 反方向运行
alternate 当运行次数为奇数时正方向运行，当运行次数为偶数时反方向运行
alternate-reverse 当运行次数为奇数时反方向运行，当运行次数为偶数时正方向运行

设置动画最后一帧的状态
animation-fill-mode
值：
forwards 以动画的最后一帧作为动画的最后呈现状态
both：状态和forwards相同
backwads：默认值，以动画的开始的第一帧作为动画的最后呈现状态

合写
animation: name duration timing-function delay iteration-count direction fill-mode;
合写的时候，除了name和duration不能省略，其他均可视情况省略

控制动画的播放状态
animation-play-state
paused 暂停
running 运动

   @keyframes move{
            from{
                left: 0;
            }
            to{
                left: 400px;
            }
        }

   /* 按步骤控制动画流程 */
        @keyframes move{
            0%{margin: 0;}
            25%{margin: 0 0 0 400px;}
            50%{
                margin: 400px 0 0 400px;
                background: #f00;
            }
            75%{margin: 400px 0 0 0;}
            100%{margin: 0;}
        }