个人总结:
通过这个阶段的学习,我学会了如何用css制作动画,还学会了在微信小程序里写一些简单的动画
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; } }