华清远见重庆中心-移动互联应用总结

/* 关于transition */
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;

            opacity: 1;
            transform: translateX(0px);

            /* 什么是transition？ */
            /* transition是过渡的意思，将会使元素从一个状态用动画形式过渡到另一个状态 */

            /* 参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition */
            /* 使用过渡属性 */
            /* transition: all 2s linear; */
            transition: all 2s linear 1s;

            /* transition复合属性可以拆解成以下属性 */

            /* 过渡属性：声明一个需要产生过渡动画的属性 */
            /* 可以同时声明多个属性，属性之间用逗号隔开 */
            /* 待选项： 
                all: 代表所有属性
                none: 没有任何属性
             */
             /* transition-property:opacity; */
            transition-property: opacity, transform;
            transition-property: all;

            /* 补间动画的时长 */
            transition-duration: 1s;
            transition-duration: 1000ms;

            /* 补间动画的速度曲线 */
            /* 带选项：
                linear: 匀速播放动画
                ease-in: 慢进匀速出
                ease-out: 匀速进慢出
                ease-in-out: 慢进慢出
                steps(n): 声明有n个过渡阶段
             */
            transition-timing-function: linear;

            /* 除了使用预制带选项，也可以手动赋值如下： */
            transition-timing-function: cubic-bezier(0.76, 0.19, 0.19, 0.8);

            /* steps 函数 */
            transition-timing-function: steps(5);

            /* 延迟播放动画的时间 */
            transition-delay: 1s;

            /* 使用transition属性设置所有的过渡动画属性 */
            /* 属性顺序如下：过渡属性名 过渡时长 速度曲线 延迟时间 */

            transition: all 3s ease-in-out 2s;
        }

        .box:hover {
            /* opacity: 0; */
            transform: translateX(200px);
        }

 /*关于animation动画 */
 body {
            margin: 0;
            padding: 0;
        }

        /* 参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation */

        /* animation动画 */
        /* animation和transition的区别： */
        /* transition 是通过属性变化，而产生过渡状态，而由浏览器自动创建补间动画 */
        /* transition 在浏览器上动态修改css属性后，依然可以播放过渡动画 */
        /* animation的状态是事先定义好的，后续改变css属性也不会播放新的动画 */
        /* animation的动画状态不止起始状态和结尾状态，可以定义多个状态 */

        /* animation是一个复合属性，由以下属性构成： */


        .box {
            width: 200px;
            height: 200px;
            background-color: red;

            /* 动画名称 */
            /* 作用：用于告诉浏览器，该动画应用哪一个动画关键帧序列 */
            animation-name: move;

            /* 动画播放时长 */
            animation-duration: 2s;

            /* 动画播放的速度曲线 */
            animation-timing-function: linear;

            /* 延迟播放的时间 */
            /* animation-delay: 1s; */

            /* 动画播放次数 */
            /* 带选项：
                infinite: 无限循环播放
             */
            /* animation-iteration-count: infinite; */
            /* animation-iteration-count: 2; */

            /* 动画播放方向 */
            /* 带选项：
                normal：正向播放
                reverse: 反向播放
                alternate: 正向播放一次然后反向再播放一次
                alternate-reverse: 反向播放一次然后正向再播放一次
             */
            /* animation-direction: alternate-reverse; */

            /* 播放结束后，元素的最终状态模式 */
            /* 
                带选项：
                forwards：动画播放完后，保留最后一帧的状态
                backwards：动画播放完后，保留第一帧的状态
                both：动画播放完后，保留第一帧和最后一帧的状态和
             */
            animation-fill-mode: forwards;


            /* 可以定义复合属性，取代上面的所有属性 */
            /* 赋值顺序，可以参考如下顺序 */
            /* duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */
            /* duration | timing-function | delay | name */
            /* duration | name */
            animation: move 2s linear 0s forwards;
        }

        /* 关键帧：动画播放时的几个关键状态 */
        /* 序列：有序的队列 */

        /* 定义一个关键帧序列 如下： */
        /* 使用@keyframes定义关键帧序列，后面参数为：动画名 */
        
        @keyframes move {

            /* 起始状态 */
            /* from { */
            0% {
                transform: translateX(0);
                color: #000;
                font-size: 16px;
            }

            /* 用百分比定义中间状态 */
            50% {
                transform: translateX(1000px);
                color: pink;
                font-size: 32px;
            }

            /* 结束状态 */
            /* to { */
            100% {
                transform: translateX(500px);
                color: green;
                font-size: 64px;
            }
        }