CSS动画

一、2D转换

转换包括：平移动、旋转、缩放

2D的要素：原点、x轴、y轴

移动——transform:translate：

transform：translateX(-200px)； ------X轴往左移动了200px；负数向左，正数向右；

transform：translateY（100px)； ------y轴往下移动了100px；

单独写这两个后面一个会覆盖前面的一个

解决：

组合：

1、transform：translateX(-200px) translateY（100px)；------两个中间要有空格

2、transform：translate（50px，50px）；------前面一个是x轴，后面一个是y轴

旋转（deg度的单位）——teansform:rotate：

transform：rotateX(190deg）------沿X轴旋转

transform：rotateY(190deg）------沿Y轴旋转

如果单独写这两行，后一行同样会覆盖前一行，解决办法和移动一样

transform：rotateZ(190deg）------沿Z轴旋转

改变旋转原点——transform-origin:

默认旋转原点为上中

1、通过关键词改变原点：

transform-origin：top left；-----改变为左上

  

2、通过具体像素改变原点：

transform-origin：50px  50px；-------设置像素坐标

改变原点对位移没有影响，对旋转、缩放有影响（注意编写顺序）

视觉效果：

    X、Y轴转动看似效果会像3d

    Z轴旋转像2d平面的

缩放——transform：scale：

transform：scaleX/Y/Z（1.5）；-------沿X/Y/Z轴缩放1.5倍，（）里是倍数

旋转、平移可以复合写，但是旋转必须放在平移后面。因为是轴在变化，原点会变化，结果就不正确------旋转永远放最后

二、3d转换

     转换包括：平移动、旋转、缩放

开启3d空间：

.father {

         transform-style：preserve-3d；------声明下面的子元素是3d的

         perspective：800px；------改变视角

         }

剩下的平移、旋转、缩放在子元素中设置

移动：

transform：translateZ（-200px）；-----近大远小

  同2D一样的设置方式

旋转:

默认旋转原点为上中

改变原点：

transform-origin：top left；

旋转：

transform：rotateX(190deg）------沿X轴旋转

transform：rotateY(190deg）------沿Y轴旋转

3D写法复合：

transform：rotate3D（0，0，0，0）----四个值 ，前面三个表示X、Y、Z、轴是否旋转，取值为：0--表示不选择；1--表示旋转。最后一个数值表示旋转的度数

当X\Y轴旋转值为0或360degshie就看不见了（垂直屏幕）

背部可见性：

可以看见背部（旋转到背后的时候），设置不可见：backface-visibility：hidden；

缩放：

沿z轴-----影响厚度，但是html没有厚度，使用不起作用

transform：scaleX/Y/Z（）

三、过渡

过渡——transition：

要看哪个元素的变化就给哪个元素加：

transition-duration：4s；    --------过渡时间

transition-delay：5s；        ---------延迟过渡时间

transition-property：width；----设置过渡的属性（查看），是瞬间的，鼠标放上时还可以是height、background……各种的设置

复合写法：

transition：all 3s step（120）；-------all指元素所有属性，step指图帧，值越大过渡越丝滑

过渡只能看到两个状态之间的，如果要看到多个状态之间的在动画

四、动画

  定义动画

   多个状态实现的（单独设置，不在元素里）：

@keyframes movie {

     from{

        border-radius：0；

        transform：translate（0） rotate Z（0）；

           }

      to {

        border-radius:50%;

        transform: translateX(1100px） rotateZ（360deg）

         }

  }

-------从from状态到to状态的动画

动画样式——animation：

给子元素设置动画样式：

animation-name：movie：-------定义动画的名字movie

animation-duration：3s；------定义动画执行所需的时间

animation-delay：2s；-----动画延迟时间

animation-timing-function：step(12);-------动画方式----12帧

animation-iteration-count：5；-----控制动画执行次数（infinite----无限）

animation-direction：alternate；------来回运动---reverse反向运动--控制动画方向设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行

animation-fill-mode：forwards；------指定动画执行前后如何为目标元素应用样式

.father：hover .son {

   animation-play-state：paused；-------允许暂停和恢复动画

       }

五、grid布局(了解）

网格布局：

网格线：网格布局中横纵的线条；

单元格：横纵线条围成的区域，每个格子内放grid项目；

间距：网格与网格之间的距离 ，横着是行轨道，纵着是列轨道

设置grind布局：

 display：grid；------将元素设置成grid容器，即采用网格布局

划分网格：

跟几组值就代表划分几行几列

1、行属性：grid-template-rows：100px  100px  100px；-----三行，每个网格100px

2、列属性：grid-template-columns：100px  100px  100px；-----三列，每个网格100px

片段划分：

fr：

grid-template-rows：1fr 3fr 1fr；

网格间距：

1、行间距：row-gap：20px；

2、列间距：column-gap：20px；