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

transform

translate 平移

/* 第一个参数: x轴的平移量，正方向向右 */

/* 第二个参数: y轴的平移量，正方向向下 */

transform: translate(100px, 200px);

/* 填一个参数的话，只有横坐标进行了平移 */

transform: translate(100px);

/* translateX x轴上平移 */

/* transform: translateX(300px);

transform: translateY(300px);

transform: translateZ(300px); */

rotate: 旋转元素

/* 参数代表旋转的角度

代表角度的单位是 deg

代表弧度的单位是 rad

*/

/* 元素的旋转角度是参考的元素的正上方 */

/* 顺时针旋转为正方向 */

/* 旋转中心默认为元素中心 */

/* transform: rotate(30deg);

transform: rotateX(30deg);

transform: rotateY(30deg);

transform: rotateZ(30deg); */

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);

skew 倾斜

/* 第一个参数: 水平轴的倾斜度数 */

/* 第二个参数: 竖直轴的倾斜度数 */

transform: skew(0, 30deg);

/* 只设置一个参数 则只有水平轴倾斜有效 */

transform: skew(30deg);

transform: skewX(30deg);

transform: skewY(30deg);

设置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);

transition

/* 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;

/* 使用transition属性设置所有的过渡动画属性 */

/* 属性顺序如下：过渡属性名 过渡时长 速度曲线 延迟时间 */

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

animation

/* animation和transition的区别： */

        /* transition 是通过属性变化，而产生过渡状态，而由浏览器自动创建补间动画 */

        /* transition 在浏览器上动态修改css属性后，依然可以播放过渡动画 */

        /* animation的状态是事先定义好的，后续改变css属性也不会播放新的动画 */

        /* 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;            }        }