CSS3属性（过渡，2D变换，3D变换，动画）

CSS3属性（过渡，2D变换，3D变换，动画）

在CSS3中，我们如果不使用JS代码，或者flash动画，想要实现元素从A状态变成B状态，并且中间的过程可以被观察到，那么可以使用过渡属性：transitiont

transiton-timing-function：过渡运动曲线

ease ： 由快到慢(默认值)
linear： 匀速运动
ease-in： 加速运动
ease-out： 减速运动
ease-in-out：先加速后减速

1.利用2D平移实现定位元素居中

div {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    margin-left: -100px;
    top: 50%;
    margin-top: -100px;
    //先走父盒子的一半，再往回走自己的一半，即可实现居中
    //但是上面这种方法有一个问题，但元素的宽高发生了改变，那么对应的赋值数据也要改变，比较麻烦。
}

2.利用translate来实现不需要每次都改变代码的居中方式。

div {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%);
    //如果使用百分比作为单位，那么位移的距离则是以元素本身的宽高作为参照计算。
    //此时不管元素的宽高如何发生变化，百分之五十都是自身的一半，不需要做任何修改。
}

3.动画（animation）

使用animation动画属性，必须要声明动画，然后再由元素调用动画

//声明动画语法
@keyframes 动画名称 {
    from {
        //开始状态
    }

    to {
        //结束状态
    }
}

//假设元素div要调用动画
//调用动画语法
div {
    animation: 动画名称 动画时间 运动曲线 延迟时间 播放次数 是否反向 ;
}

属性	描述
@keyframes	定义动画
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的时间。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
属animation-delay性	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。还有 infinite
animation-direction	动画是否在下一周期逆向地播放。默认是 “normal”，alternate逆播放
nimation-play-state	规定动画是否正在运行或暂停。默认是 “running”。还有“paused”
animation-fill-mode	规定动画结束后状态，保持 forwards 回到起始 backwards
animation	所有动画属性的简写属性

4.百分比设置多组动画

//除了上面的使用from以及to关键字来声明动画之外，还有一种方式，可以将动画分割为若干个节点。
@keyframes 动画名称 {
     0% {
         //开始节点
     }
     50% {
         //中间节点
     }
     100% {
         //结束节点
     }
 }
//调用动画的方式与之前相同。