华清远见重庆中心——CSS动画个人总结

2D变换transform

1、平移：translate

/* 第一个参数: x轴的平移量，正方向向右 */
/* 第二个参数: y轴的平移量，正方向向下 */
transform: translate(100px, 200px);
/* 填一个参数的话，只有横坐标进行了平移 */
transform: translate(100px);
/* translateX x轴上平移 */
/* transform: translateX(300px);
transform: translateY(300px);
transform: translateZ(300px); */

2、旋转：rotate

/* 参数代表旋转的角度
   代表角度的单位是 deg
   代表弧度的单位是 rad
*/
/* 元素的旋转角度是参考的元素的正上方 */
/* 顺时针旋转为正方向 */
/* 旋转中心默认为元素中心 */
transform: rotate(30deg);
/*transform: rotateX(30deg);
transform: rotateY(30deg);
transform: rotateZ(30deg); */

3、缩放：scale

/* 参数代表的是缩放比例，值为1 则为原始大小 */
 transform: scale(1, 0.5);
/* 参数只写一个，代表的是水平和竖直方向缩放相同的比例 */
transform: scale(3);
/* 负数代表的就是在指定轴上的镜像 */
transform: scale(-0.5, 1);

transform: scaleX(2);
transform: scaleY(2);
transform: scaleZ(2);

/* 隐藏元素的方法：将缩放调为0 */
transform: scale(0);

4、倾斜：skew

/* skew 倾斜 */
/* 第一个参数: 水平轴的倾斜度数 */
/* 第二个参数: 竖直轴的倾斜度数 */
transform: skew(0, 30deg);
/* 只设置一个参数 则只有水平轴倾斜有效 */
transform: skew(30deg);

transform: skewX(30deg);
transform: skewY(30deg);

同时设置多个变换属性，用空格隔开 

 transform: rotate(180deg) translateX(100px) scale(0.5);

5、变化的原点

/* 设置transform的原点 */
/* 原点的位置会影响旋转的圆心，缩放的位置 */

/* 值的带选项：center, top, bottom, left, right, 还可以写具体的长度值 */
/* transform-origin: center; */
transform-origin: right bottom;

/* 原点若x值和y值都为0，代表的是元素左上角的位置 */
/* 第一参数值代表横向移动的距离，正数代表向右移动，负数代表向左移动 */
/* 第二参数值代表纵向移动的距离，正数代表向下移动，负数代表向上移动 */
transform-origin: 50px 100px;

transform: rotate(0deg);

/* 变换原点还会影响缩放的位置 */
transform-origin: left top;
transform: scaleY(1);

6、浏览器兼容性的前缀

/* 谷歌浏览器可以识别该属性 */
-webkit-transform: translate(100px, 120px);
/* 火狐浏览器可以识别该属性 */
-moz-transform: translate(100px, 120px);
/* 市面上现在流行使用postCss来解决css样式兼容性问题 */

过渡动画transition

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

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

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

            /* 过渡属性：声明一个需要产生过渡动画的属性 */
            /* 可以同时声明多个属性，属性之间用逗号隔开 */
            /* 待选项：
                all: 代表所有属性
                none: 没有任何属性
             */
            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;

animation动画

/* 动画名称 */
            /* 作用：用于告诉浏览器，该动画应用哪一个动画关键帧序列 */
            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;
            }
        }