CSS3动画

分类

1.transition过渡

2.transform转化

3.animation动画

transition

transition能够实现一个状态到另一个状态的平滑过渡

transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
transition: all 3s linear 0s;
后两个属性可以省略

过渡属性：all,none,weigth、height、color、background、border、margin、padding、top、left、right、bottom

运动曲线：linear线性、ease减速、ease-in加速、ease-out减速、ease-in-out先加速后减速

transform转化（2D）

1.缩放scale

transform: scale(x, y);       
transform: scale(2, 0.5);
xy的数值不能是百分比

<div class="box">     
    <div class="box1">1</div>     
    <div class="box2">2</div>     
    <div class="box3">3</div> 
</div>

.box .box2 {             
    background-color: green;             
    transition: all 1s;         
}           
.box .box2:hover {             
    /*width: 500px;*/             
    /*height: 400px;*/             
    background-color: yellowgreen;               
    /* transform:  css3中用于做变换的属性                 
    scale(x,y)：缩放 */             
    transform: scale(2, 0.5);         
}

2.位移translate

transform: translate(水平位移, 垂直位移);       
transform: translate(-50%, -50%);
参数必须是百分比，相对于自身的宽度和高度
transform: translateX(a); 元素x方向位移a，y方向不变
transform: translateY(b); 元素y方向位移b，x方向不变

<div class="box">     
    <div class="box1">1</div>     
    <div class="box2">2</div>     
    <div class="box3">3</div> 
</div>

div:nth-child(2) {             
    background-color: pink;             
    transition: all 1s;         
}           
/* translate:(水平位移，垂直位移)*/         
div:nth-child(2):hover {             
    transform: translate(-50%, -50%);         
}

3.旋转rotate

transform: rotate(角度);       
transform: rotate(45deg);
正值顺时针、负值逆时针

<div class="box">1</div>

.box {             
    width: 200px;             
    height: 200px;             
    background-color: red;             
    margin: 50px auto;             
    color: #fff;             
    font-size: 50px;             
    transition: all 2s;
     /* 过渡：让盒子在进行 transform 转换的时候，有个过渡期 */         
}           
/* rotate（角度）旋转 */         
.box:hover {             
    transform: rotate(-405deg); 
    /* 鼠标悬停时，让盒子进行旋转 */         
}

4.倾斜skew

transform: skew(a, b); 元素x方向逆时针倾斜角度a，y方向顺时针倾斜角度b  
transform: skewX(a); 元素x方向逆时针倾斜角度a，y方向不变  
transform: skewY(b); 元素y方向顺时针倾斜角度b，想方向不变

transform转化（3D）

1.透视perspective

  透视可以将一个2D平面，在转换的过程当中，呈现3D效果。但仅仅只是视觉呈现出3d 效果，并不是正真的3d。  

格式有两种写法：  

（1）作为一个属性，设置给父元素，作用于所有3D转换的子元素  

（2）作为 transform 属性的一个值，做用于元素自身。

body {            
    /* 给box的父元素加透视效果*/             
    perspective: 1000px;         
}

2.移动translateX、translateY、translateZ

transform: translateX(100px);    //沿着 X 轴移动       
transform: translateY(360px);    //沿着 Y 轴移动       
transform: translateZ(360px);    //沿着 Z 轴移动

<div class="box"></div>

.box {             
    width: 200px;             
    height: 200px;             
    background: green;             
    transition: all 1s;         
}           
.box:hover {             
    transform: translateX(100px);         
}

3.旋转rotateX、rotateY、rotateZ

transform: rotateX(360deg);    //绕 X 轴旋转360度       
transform: rotateY(360deg);    //绕 Y 轴旋转360度       
transform: rotateZ(360deg);    //绕 Z 轴旋转360度

<div class="rotateX">     
    <img src="images/x.jpg" alt=""/>
</div>

.rotateX {
     width: 300px;
     height: 226px;
     margin: 200px auto;
     /* 透视 :加给变换的父盒子*/
     /* 设置的是用户的眼睛距离 平面的距离*/
     /* 透视效果只是视觉上的呈现，并不是正真的3d*/
     perspective: 110px;
}
img {
      /* 过渡*/
      transition: transform 2s;
}
 
/* 所有的3d旋转，对着正方向去看，都是顺时针旋转*/
.rotateX:hover img {
      transform: rotateX(360deg);
}

4.3D呈现（transform-style）

3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。属性值可以如下：

transform-style: preserve-3d;     //让 子盒子 位于三维空间里       
transform-style: flat;            //让子盒子位于此元素所在的平面内（子盒子被扁平化）

animation

（1）通过@keyframes定义动画；  

（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；  

（3）在指定元素里，通过 animation 属性调用动画。

定义动画

        /* 方式一：定义一组动画*/
        @keyframes move1 {
            from {
                transform: translateX(0px) rotate(0deg);
            }
            to {
                transform: translateX(500px) rotate(555deg);
            }
        }
 
        /* 方式二：定义多组动画*/
        @keyframes move2 {
            0% {
                transform: translateX(0px) translateY(0px);
                background-color: red;
                border-radius: 0;
            }
 
            25% {
                transform: translateX(500px) translateY(0px);
 
            }
 
            /*动画执行到 50% 的时候，背景色变成绿色，形状变成圆形*/
            50% {
                /* 虽然两个方向都有translate，但其实只是Y轴上移动了200px。
                因为X轴的500px是相对最开始的原点来说的。可以理解成此时的 translateX 是保存了之前的位移 */
                transform: translateX(500px) translateY(200px);
                background-color: green;
                border-radius: 50%;
            }
 
            75% {
                transform: translateX(0px) translateY(200px);
            }
 
            /*动画执行到 100% 的时候，背景色还原为红色，形状还原为正方形*/
            100% {
                /*坐标归零，表示回到原点。*/
                transform: translateX(0px) translateY(0px);
                background-color: red;
                border-radius: 0;
            }
        }

.box {
            width: 100px;
            height: 100px;
            margin: 100px;
            background-color: red;
 
            /* 调用动画*/
            /* animation: 动画名称 持续时间  执行次数  是否反向  运动曲线 延迟执行。infinite 表示无限次*/
            /*animation: move 1s  alternate linear 3;*/
            animation: move2 4s;
        }

animation: 动画名称  时间  次数  方向  运动曲线 延迟 结束状态
 
animation: move1 1s 1 alternate  linear 3s forwards;
 
animation: move2 4s;

执行次数：infinite表示无限次

动画方向：normal正向，alternate反向

运动曲线：linear、ease、ease-in

结束状态：forward保持结束状态，backwards回到最初状态