一、变换 transform
1、移动
语法：transform：translate(x , y);
translateX(数值+单位) 水平移动、translateY(数值+单位) 垂直移动 transform:translate(150px,150px) ;
/* 斜着走 */
transform: translateX(500px);
/* 往左右走 */
transform: translateY(500px);
/* 往上下走 */
2、旋转
语法：transform： rotate(数值+deg);
rotateX(数值+角度deg) 绕x轴旋转rotateY(数值+deg) 绕y轴旋转rotateZ(数值+deg) 绕z轴旋转
perspective 透视（如果想看到3D效果，可以给父元素加该值。数值不宜过大）
transform: rotateY(90deg);
3、缩放
语法：transform:scale(x , y);
scaleX(数值) 水平缩放scaleY(数值) 垂直缩放scale(数值) 一个值时是等比例缩放 transform: scale(1.1);
/* 等比例缩放 */
transform: scaleY(2);
/* 上下缩放 */
transform: scaleX(2);
/* 左右缩放 */
transform: scale(1.1,0.5);
/* x轴y轴 */
4、扭曲
语法：transform:skew(数值+deg);
skewX(数值+deg) x方向扭曲skewY(数值+deg) y方向扭曲 transform: skewX(90deg);
5、变换基点
语法：transform-origin:;
默认 变换基点在中心 center center值： x值 y值 transform-origin: top center;
/* 定义基点 */
6、缩写
语法：transform ： translate(值 ) rotate(值) scale(值) skew(值)
二、自定义动画
1、关键帧
（1）@keyframes 动画名称{ from{ 属性名 : 属性值; } to{ 属性名 : 属性值; } }
@keyframes myrun{
from{
transform: translate(0,0);
}
to{
transform: translate(800px,500px);
}
}
（2）@keyframes 动画名称{ 0%{ 属性名 : 属性值; } 50%{ 属性名 : 属性值; } 100%{ 属性名 : 属性值; } }
@keyframes myrun{
0%{
transform: translate(0,0);
}
100%{
transform: translate(800px,500px);
}
}
2、动画名称
语法：animation-name:;
animation-name: myrun;
3、动画持续时间
语法：animation-duration:;
4、动画速度
语法：animation-timing-function:;
值：
ease 默认 逐渐变慢linear 匀速ease-in 加速ease-out 减速ease-in-out先加速后减速cubic-bezier(x1,y1,x2,y2) 贝塞尔曲线steps(数值) 阶跃
5、动画延迟时间
语法：animation-delay:;
6、动画次数
语法：animation-iteration-count:;
值：
默认 播放1次infinite 无限次
7、动画方向
语法：animation-direction:;
值：
normal 默认 正向单向播放reverse 反向单向播放alternate 来回播放alternate-reverse 倒着来回播
8、动画播放状态
语法：animation-play-state:;
值：
running 播放pause 暂停
9、缩写
语法：animation : an-name值 an-duration值 an-timing-function值 an-delay值 an-iteration-count值 an-direction值
好文链接
发表评论