一、过渡

1、概念

transition过渡属性是CSS3浓墨重彩的特性，过渡可以为一个元素在不同样式之间变化自动添加 “补间动画”。过渡包含四个小属性，如下

            /* 
                width: 什么属性要过渡，例如由正方形变为圆形则为border ，如果要所有属性都参与过渡，可以写all（all尽量少用，会引发效率问题）
                1s: 动画时长，单位是秒
                linear: 变化速度曲线
                0s: 延迟时间，单位是秒
             */
            transition: width 1s linear 0s;

2、哪些属性可以参与过渡

• 所有数值类型的属性，都可以参与过渡，比如width、height、left、top、border-radius
• 背景颜色和文字颜色都可以被过渡
• 所有变形（包括2D和3D）都能被过渡

3、过渡的缓动效果

transition的第三个参数就是缓动参数，也是变化速度曲线，常用缓动参数如下（曲线越陡速度越快）

transition-timing-function.png

缓动参数可以使用贝塞尔曲线值来设置，网站 https://cubic-bezier.com/ 可以生成贝塞尔曲线，可以自定义动画缓动参数，拖动曲线得到自己想要的变化曲线后，复制cubic-bezier即可

transition: width 5s cubic-bezier(.17,.67,.83,.67) 0s;

        /* 
            当盒子又是舞台，又是演员的时候，设置此属性
            设置变形状态，保留它内部的3D效果
         */
        transform-style: preserve-3d;

二、动画

1、可以使用@keyframes 来定义动画，keyframes表示“关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀
2、定义动画之后，就可以使用animation属性调用动画

    /* 
        keyframe: 定义动画
        r: 动画的名字
        from: 起始状态
        to: 结束状态
     */
    @keyframes r {
        from {
            transform: rotate(0);
        }
        to {
            transform: rotate(360deg);
        }
    }

        /* 
            name: 动画名字
            duration: 总时长
            timing-function: 缓动效果
            delay: 延迟时间
            iteration-count: 执行次数，永远执行写infinite，可不写
            direction: 想让动画的2、4、6...（偶数次）自动逆向执行，加上alternate参数即可，可不写
            fill-mode: 想让动画停止在最后结束状态，加上forwards，可不写
         */
        animation: name duration timing-function delay iteration-count direction fill-mode;
        animation: r 3s linear 0s infinite;