CSS3动画

1.transition

　　过渡，可以在不使用Flash动画或者JavaScript的情况下，为元素从一种样式变换为另一种样式时添加效果。虽然低版本浏览器(ie9以下版本)不支持，但是不会影响页面布局。经常搭配:hover一起使用。

　　transition:要过渡的属性 花费时间 运动曲线 何时开始

　　属性：想要变化的CSS属性，可以是宽高、颜色、内外边距等

　　花费时间：完成过渡过程需要的时间，单位是s(必须写单位)，比如0.5s

　　运动曲线：前两个属性是必须提供的，运动曲线默认是ease(即慢快慢)，还有linear(始终以相同速度执行过渡)等

　　何时开始：单位是s，用来设置延迟触发的时间，默认是0s

<div></div>
<style>
    div {
        width: 200px;
        height: 100px;
        background-color: skyblue;
    }
    div:hover {
        width: 400px;
        height: 200px;
        background-color: red;
        /* 当多个属性要变化时，用逗号隔开 */
        /* transition: width 1s, height 1s, background-color 1s; */
        /* 当所有属性都要变化时，用all */
        transition: all 1s;
    }
</style>

2.transform

　　转换，可以实现元素的位移(translate)、旋转(rotate)、缩放(scale)等效果

translate：2D移动，可以改变元素在页面中的位置，类似定位。沿着X和Y轴移动元素。

　　移动元素有三种方法(position、margin和translate)，translate最大的优点是不会影响到其他元素的位置。

　　translate中的百分比单位是相对于自身元素的百分比，比如宽度为100px，x轴移动50%即向右移动50px

　　translate对行内标签没有效果

transform: translate(100px, 100px);
transform: translateX(100px);

　　水平垂直居中

<div></div>
<style>
    div {
        width: 200px;
        height: 100px;
        background-color: skyblue;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

rotate：2D旋转，单位是deg(度)，正值顺时针，默认旋转的中心点是元素的中心点

transform: rotate(45deg);
// 设置元素中心点
transform-origin: left bottom;
transform-origin: 50px 50px;

scale：2D缩放，可以设置中心点缩放，并且缩放不会影响到其他元素，大于1放大，小于1缩小

transform: scale(2, 2);

当同时有位移和其他属性的时候，先写位移

3.animation

　　动画，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比于过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

　　制作动画分为两步：1.先定义动画，2再调用动画

　　动画序列：0%是动画的开始，100%是动画的完成，这样的规则就是动画序列，在这个过程中可以改变任意多样式任意多的次数。需要使用百分比(整数，就是动画持续时间的划分)来规定变化发生的时间，或关键字form和to，等同于0%和100%

<div></div>
    <style>
        /* 定义动画 */
        @keyframes move {
            /* 开始状态 */
            0% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(1000px, 0);
            }
            50% {
                transform: translate(1000px, 500px);
            }
            75% {
                transform: translate(0, 500px);
            }
            /* 结束状态 */
            100% {
                transform: translate(0, 0);
            }
        }
        div {
            width: 200px;
            height: 100px;
            background-color: skyblue;
            /* 调用动画 */
            animation-name: move;
            /* 动画持续时间 */
            animation-duration: 0.1s;
        }
    </style>

　　常用属性：animation-delay          规定动画何时开始

　　　　　　animation-iteration-count: ;      规定动画被播放的次数，infinite为无限循环

　　　　　　animation-direction        规定动画在下一周期是否逆向播放，可以实现动画走回来，而不是直接跳回来的功能

　　　　　　animation-fill-mode      规定动画结束后状态，默认backwards(回到起始)，可以设置forwards(保持结束状态)

　　　　　　animation-play-state    规定动画是否正在运行或暂停，默认是running，paused为暂停，可以结合hover使用，即鼠标移上去则暂停动画

　　　　　　animation-timing-function     规定动画的速度曲线，如ease、linear等，其中steps()指定了时间函数中的步长

实现打字机效果

<div>一二三四五六七八九十</div>
    <style>
        /* 定义动画 */
        @keyframes move {
            /* 开始状态 */
            0% {
                width: 0;
            }
            /* 结束状态 */
            100% {
                width: 200px;
            }
        }
        div {
            overflow: hidden;
            font-size: 20px;
            width: 0;
            height: 30px;
            /* 让文字强制在一行内显示 */
            white-space: nowrap;
            background-color: skyblue;
            /* 调用动画 */
            animation-name: move;
            /* 动画持续时间 */
            animation-duration: 2s;
            animation-timing-function: steps(10);
            animation-fill-mode: forwards;
        }
    </style>

4.3D转换

　　多了一个z轴：垂直屏幕，往外是正值，往里是负值

translate3d

　　主要就是多了一个translateZ()，并且单位一般用px而不用百分比

transform: translate3d(x, y, z);

perspective

　　透视，就是视距，即人眼到屏幕的距离，想让网页产生3D效果必须加透视，单位是像素，离视觉点越近成像越大，越远成像越小。

　　perspective需要写到被观察元素的父元素上面，父元素中的每个子元素可以加不同的translateZ，来实现立体的效果。

　　见文章：https://www.cnblogs.com/yanggeng/p/11285856.html

perspective: 200px;

rotate3d

　　3D旋转，可以让元素在三维空间内沿着x轴，y轴、z轴或自定义轴进行旋转

　　deg为正值图片的上沿往里面翻转

transform: rotateX(45deg);
transform: rotate3d(x, y, z, deg);  // 自定义角度

transform-style

　　3D呈现，用来控制子元素是否开启三维立体环境，preserve-3d为开启立体空间。需要在父元素添加该属性，能够影响到子元素。

　　用途：一个父元素中有3D元素，需要开启立体空间，否则子元素的立体效果不会显示

transform-style: preserve-3d;