变换//3d/关键帧动画

前端动画
1.css动画
1.1 过渡动画
应用于特殊的css属性之间的过渡
主要用来改变css样式，设置不同的值，不同值之间的过渡 例如 left top width等等
1.2 关键帧动画

2.js动画
通过js动态给元素设置不同的样式，形成的动画

css3动画要比js动画效率高很多，能用css做的动画，就不用js做

过渡动画

    1.没有主动触发时机
    2.伪类可以触发过渡动画 hover focuse checked ....
    3.媒体查询可以触发过渡动画
    4.使用js触发

    transition-duration 过渡动画持续的时间，可以不足一秒，0.5s 简写 .5s
    
    transition-property 支持过渡动画的css属性
    可以省略，默认时 all all代表所有改变的css属性
    如果需要设置多个属性，则用逗号隔开

    transition-timing-function 动画的变化曲线
    ease 默认值，先快后慢
    linear 匀速变化
    ease-in: 先慢后快
    ease-out：先快后慢
    ease-in-out：先慢后快再慢 ，淡入淡出
    cubic-bezier(x1,y1,x2,y2) 贝塞尔曲线函数,取值的范围 [0,1]
    steps(n);  steps(3,end/start) 分步执行

    transition-delay 动画延迟执行时间

    动画的复合写法
    transition: property duration timing-function delay
    property duration 是必写项

2d 变换 transform

    变换类型
    1.平移
    2.旋转
    3.倾斜(拉伸)
    4.缩放

    注意
    1.所有的行元素都不形变，img除外
    2.仅仅是形状发生变化，文档流的空间并没有变化
    3.形变的原点是整个元素的中心点
    4.变换后元素的坐标也发生变化，因此多次变换的时候，在变换原点默认中心点的时候，先缩放在平移，第一次变换的时候，坐标原点没有发生变化，
    再做平移，基本能达到最终想要的平移的位置；先平移在缩放坐标原点发生变化，会和想要的最终位置有差异；
    

    平移translate
    1.水平方向的平移 translateX
    2.竖直方向的平移 translateY
    3.综合写法 translate(x,y) x为正则向右移动，x为负则向左移， y为正则向下移动，y为负则向上移
    x 和 y 可以是具体的数值，也可以是百分比，百分x是基于元素的宽设置，y是基于元素的高设置

    缩放 scale
    放大和缩小的形变属性
    scale(x,y) x代表的是x轴方向的缩放，y代表的是y轴方向的缩放，如果x=y，则参数只写一个即可
    x y 指的是放大倍数
    如果值为 负数，则先翻转，再缩放
    scaleX(num) x轴缩放
    scaleY(num) y轴缩放

    缩放和平移和写，建议先写缩放，再写平移

    旋转 rotate
    rotate(num+deg) deg是旋转角度
    如果num为正 则顺时针旋转
    如果num为负 则逆时针旋转
 形变的原点是元素的中心点
修改形变的参考点
transform-origin
    它的值 可以是具体的数值 px表示
    也可以是方向的组合 left top right bottom center 
    (默认是center center) 
    也可以是百分比 百分比是基于自身的宽和高

    还可以是 三种方式的组合
        transform-origin: 100px 60px
        transform-origin: left top
        transform-origin: 10% 10%
        transform-origin: 100px center

    倾斜 skew
    类比 translate 可以单独的 skewX,skewY 可以和写 skew(x,y)
    skewX(num+deg) 当前元素的坐标系与x轴的夹角
    skewY(num+deg) 当前元素的坐标系与y轴的夹角

    如果X num的值为正 向左倾斜
    如果X num的值为负 向右倾斜


    设置倾斜的时候，x 和 y 值的和不能是90度
    倾斜的实质是改变坐标轴的夹角，物体大小不变。

3d 动画

    perspective 景深 /视距
    1.给需要添加3d环境的父元素添加perspective
    2.只能给确切的值，不能使用百分比，因为它实际上是确定了一个z轴，z轴不能百分比
    3.值不能是0或者负数

    景深一般设置为800

    perspective-origin 设置3d视点的位置，
    默认是 center center
    可以设置的值有 left top center right bottom
    也可以设置具体的值
    还可以设置百分比 百分比是基于元素的宽高进行设置

    perspective-origin 一般默认即可

    transform-style 设置渲染环境
        默认值 flat 表示2d环境
        preserve-3d 表示3d环境
        
        设置景深(z轴上屏幕，眼睛的距离，距离越小越大)
        perspective：500px;

    3D和2d属性一致，平移，缩放，旋转
    translate3d(100px,100px,100px) 平移和写，建议分开写
    translateZ(400px) z轴平移

    旋转
    3d旋转都是围绕自身坐标轴旋转，元素发生变化，
    它的坐标轴也随之发生变化
    X轴旋转，值为正，上边翻向页面里面
    Y轴旋转，值为正，右边翻向页面里面

    缩放 scale
    scaleX(),scaleY(),scaleZ,scale3d() 单独
    使用scaleZ是无效的
    
    背面是否显示
    *backface-visibility 该属性用来控制当前元素形变的时候是否可视
    hidden 从背面看，隐藏元素
    visible 默认，从背面看，显示元素

关键帧动画

animation: name duration timing-function delay iteration-count direction fill-mode;

关键帧动画和过度动画的区别
1.关键帧动画有自己的触发时机,只要加上关键帧动画,该动画就能执行
2.关键帧动画,可以对动画的详细流程进行控制

设置一个关键帧动画
1.封装一个动画流程 使用 @keyframes
2.给需要执行动画的元素添加 animation,设置动画相关属性

设置动画名
animation-name: aa (aa是通过@keyframes声明的动画名)
动画的持续时间
animation-duration: 2s

**以上两个属性不能省略

执行动画的函数
animation-timing-function
延迟时间
animation-delay

    动画重复的次数
    animation-iteration-count
    默认是 1
    无限次 infinite

设置动画的方向
animation-direction
默认是 normal 正方向
reverse: 反向
alternate 动画执行次数为 奇数的时候是正向,偶数的时候是反向
alternate-reverse 动画执行次数为 奇数的时候是反向,偶数的时候是正向

关键帧动画结束时候的填充方式
alternate-fill-mode
forwards 关键帧动画停留在动画的最后一帧
backwords 关键帧动画停留动画执行前的初始状态(默认)
both: 等于forwards

合写方式
animation: name duration timing-function delay iteration-count direction fill-mode; 如果不需要某一个属性,则可以不写

*关键帧动画的控制属性(控制动画的状态)
animation-play-state
running 默认,执行动画
paused 暂停动画