2020-12-18

all:所有的，全部
transition: background-color 1S,width 5s,height 5s;
ease；默认效果：慢-快-慢
linear:匀速变换
ease-in:低速开始
ease-out:低速结束
transition: width 3s ease-in-out;
transition: 过渡属性 过渡时间 时间曲线 延迟时间;
过渡属性:all所有的属性都要变换
过渡时间：单位s 0s单位可以省略
时间曲线：ease（默认值，慢-快-慢）linear（匀速）
延迟时间：延后多少开始变换
hover鼠标悬停效果
translate（）：平移（位移）
一个值：只位移x轴
两个值：第一个值位移x轴，第二个值位移y轴
translatey（）：y轴位移
translatex（）：x轴位移
transform: translate(1000px,500px);
scale(n):缩放
一个值：宽高同时缩放
两个值：第一个值是宽度，第二个值缩放高度
rotate():旋转,单位度数deg
正数：顺时针旋转
负数：逆时针旋转
transform: rotate(180deg);
transform:skew(180deg);
skew():斜切(倾斜),单位是度数deg
animation: 动画名称时间 循环次数 时间曲线 动画最终的样式;
infinite:无限循环;
时间曲线：ease（默认值 慢-快-慢） linear：匀速
动画最后的状态：forwards保留动画最后的样式
backwards：默认值，回到动画最初的样式
1,创建关键帧:
key:钥匙,关键.
frames:帧
name：动画名字
from：从哪里来。动画开始。0%
to：到哪里去，动画结束 100%