transition:要过度的属性名字   持续时间s  延时时间0s  运动曲线;

1. 要过渡的属性必须拥有具体的可以计算的值！！ width,height,background-color,opacity...均可过渡
但是display:none/block  visibility:hidden/visible  text-align:left /center不支持过渡;

2. 持续时间属性值必不可少！！

3. 延时时间默认为0s

4. 运动曲线 linear匀速 ease放缓(慢--快--慢)（默认值）  ease-in以快结尾

多属性值过渡

transition: width 2s 0s linear,height 1s 0s linear,opacity 1s 0s linear.....;

transition:all 1s;//所有要变化的属性的持续时间 延时时间  运动曲线一致  就省略了

transition:1s;//省略的是all

2d变形transform

行内元素不能进行变形动画

平移

transform:translate(x,y) 水平x 垂直y  +x +y -x -y
transform:translate(300px,500px);
transform:translate(50%,-50%) 自身宽高宽高的一半

单位: +xpx,+ypx 向x轴的正方向（右）和y正方向（下）

              -xpx ,-ypx x反方向(左) y反方向(上)

              +x% 向右移动了自身宽度的x%

              50%,0% 向右移动了自身宽度的一半！！

              -50%,0% 向左移动了自身宽度的一半！

              +y% 向下移动了自身高度的y%

              +50% 向下移动了自身高度的一半！！！

              rem

              transform:translate(2rem,-3rem)

应用：实现居中(不要求知道盒子的宽高)

div {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

缩放

transform:scale(w,h); w,h=0  w<1 缩小 w>1 放大
transform:scale(1.2);等比例放大
           w: 是宽度的缩放倍数
           h: 是高度的缩放倍数
           w=h 那么只需要写一个值即可！！！
            transform: scale(2,2);=== transform: scale(2);
            w,h>1放大
            w,h<1缩小
            w,h = 1不变化
            w,h=0 没有了 消失了

应用：显示小于12px字体

默认字体:font-size:12px 显示10px字体行内块+块类型的盒子 +transform:scale(10/12);

旋转

transform:rotate(ndeg);+ndeg 顺时针旋转 -ndeg 逆时针旋转

旋转参考原点(中心点)盒子的中心(center center/50% 50%)

当你只写一个值时，第二个值默认是center

倾斜

transform:skew(xdeg,ydeg); xdeg在x轴有倾斜倾斜度数为xdeg  y在y轴有倾斜

-xdeg 在x正方向的倾斜
+xdeg 在X负方向的倾斜
 +ydeg 向着y轴的负方向倾斜 -ydeg向着y轴的正方向倾斜
transform:skew(xdeg) 只有x轴倾斜

修改变形中心的属性

d,3d修改变形中心
           transform-origin:center center(默认值，中心)
           xpx ypx/ x% y% /right top bottom left center
           transform-origin:100% 0%; 修改变形中心到盒子的右上角

变形属性的复合写法

变化样式可以使用复合写法，如 transform: scale( ) translate（） skew( ) rotate( );

变化样式内多个样式值顺序的不同会导致完全不一样的结果

transform:translateX(200px) translateY(300px) rotate(45deg);

transform:rotate(45deg) translateX(200px) translateY(300px) ;

3D变形动画

3d坐标系 --》左手定则食指(y) 中指(z) 大拇指 (x)

3d平移

ttransform:translate3d(x,y,z);z 代表沿着z平移 +z 正方向移动 -z 负方向移动

transform:translateX(300px);
transform:translateY(300px);
transform:translateZ(300px);

transform:translate3d(300px,300px,300px);
transform:translateX(300px) translateY(300px) translateZ(300px);(时间顺序)

单位px / % /rem

x 沿着x轴平移

+zpx 沿着z轴正方向平移(变形盒子的正前方就是z轴从屏幕出来 +z 穿到屏幕-z)

景深属性(视距)

不为0视距---》形成一个3d效果，3d空间---》近大远小

perspective:800px;( 600px--1000px) 800px 就代表你的眼睛到3d变形物体有800px的距离

保证你的眼睛到box盒子的景深距离是一致的！！

你就把景深写到盒子.box身上去!

1. 写在父盒子身上 perspective:600px;

2. 写在自己身上加在变形属性里 perspective()

 transform:perspective(500px)  rotateY(30deg);

一 般，设置到变形元素的父盒子身上即可是在事件触发时才会使用景深去营造3d效果

3D旋转

transform:rotate3d(x,y,z,ndeg);
x:1/0 1:沿着X轴有旋转  0沿着x轴没有旋转
y:1/0 1:沿着y轴有旋转  0沿着y轴没有旋转
z:1/0 1:沿着z轴有旋转  0沿着z轴没有旋转
 x: 1/200/300  代表在x轴上有旋转
        x: 0 代表在x轴上没有旋转

ndeg 代表旋转度数

绕X轴旋转:

transform:rotate3d(1,0,0,45deg); 绕着x轴旋转了45deg
等同于transform:rotateX(45deg);

绕Y轴旋转:

transform:rotate3d(0,1,0,45deg); 绕着y轴旋转了45deg
等同于transform:rotateY(45deg);

绕Z轴旋转

transform:rotate3d(0,0,1,45deg); 绕着z轴旋转了45deg
等同于transform:rotateZ(45deg);

绕面旋转

transform:rotate3d(1,1,0,45deg); 绕着x轴和y轴组成的平面对角线旋转了45deg

绕体旋转

transform:rotate3d(1,1,1,45deg); 绕着x轴和y轴和z轴组成的体对角线旋转了45deg

背面隐藏属性

 backface-visibility: hidden隐藏/visible可见的(默认的);

什么时候一个面会成为反面?

旋转180deg或者-180deg 浏览器才会认为是反面

保留3d状态(用在没有事件触发时候显示3d效果)

transform-style:preserve-3d保留3d效果/flat回到2d状态（回到最初状态 默认值）

不需要通过任何鼠标事件即可保持旋转度数！！

事件去触发 :hover :active(过渡) + 景深营造3d空间！！

无事件触发的情况下 + 保留3d效果的属性营造3d空间！！！

保留3d效果的属性:

transform-style:preserve-3d(保留3d效果)/flat(2d效果)

同样写在父盒子身上！！！

关键帧动画（补间动画）

小车折返：初始状态 (100px,100px) ----> 树跟前装上去(400px,400px)---->旋转掉头(300px,300px)---->最初位置

动画：多个状态的持续！！！不需要事件触发自发进行

定义

@keyframes 动画的名称 {
    //几个关键状态  
    0% {
        //最初状态 
        css代码;
    }
    .....
    n%{
        
    }
   
    100% {
        //最终的状态
    }
    
}

animation:动画的名称  持续的时间  【运动的曲线  延时的时间  执行的次数  是否往返  运动的状态  动画最后一帧的状态】;  


动画的名称 animation-name:动画的名称;
持续的时间 animation-duration:ns;
运动的曲线 animation-timing-function:linear/ease/ease-in/ease-in-out..
延时的时间 animation-delay: ns;
执行的次数  animation-iteration-count:1默认/2/3/infinite;
是否往返 animation-direction:normal不往返/alternate往返
运动的状态 animation-play-state:running播放/paused停止

动画最后一帧的状态animation-fill-mode: forwards动画保持最后一帧的状态/backwards动画回到第一帧的状态    both:动画没执行时候就保持动画第一帧的状态，执行完毕保持最后一帧状态！

css3动画库 animate.css

网址: Animate.css | A cross-browser library of CSS animations.

引入动画库:

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

使用动画

<h1 class="animate__animated animate__bounce">An animated element</h1>

码农公寓

过度动画transition