一、transform 转换属性
#1. translate位移
transform : translate(50px,100px); //把元素水平移动 50 像素，垂直移动 100 像素
transform : translateX(50px); //把元素水平移动 50 像素
transform : translateY(100px); //把元素垂直移动 100 像素
#2. scale缩放
transform : scale(2); //把元素宽高同时放大两倍
transform : scale(2,4); //把元素宽度放大2倍，高度放大4倍
transform : scaleX(0.5); //把元素宽度缩小一半
transform : scaleY(1.2); //把元素高度放大1.2倍
#3. rotate旋转
transform : rotate(45deg); //把元素旋转45deg
transform : rotateX(45deg); //把元素沿X轴旋转45deg
transform : rotateY(45deg); //把元素沿X轴旋转45deg
#4. skew倾斜
transform : skew(30deg,20deg); //把元素沿水平方向倾斜30deg,沿垂直方向倾斜20deg
transform : skewX(30deg); //把元素沿水平方向倾斜30deg
transform : skewY(20deg); //把元素沿垂直方向倾斜20deg
每个元素只能设置一个transform属性，可以同时设置多个值,如:
transform: rotate(30deg) translate(50px) scale(2);
#二、transition 过渡属性
transition-property : css的属性名称 或者all
transition-duration : 动画持续的时间
transition-timing-function : 动画的执行的速度
ease:平滑运动
linear：线性运动
ease-in:逐渐加速 速度越来越快
ease-out:逐渐减速速 速度越来越慢
ease-in-out:先加速再减速 速度先变快再变慢
transition-delay : 动画延迟时间
transitionend css过渡效果结束后执行的事件
一般不分开设置，直接写复合属性, transition: all 2s linear 2s;
1
2
3
2
3
#三、animation 关键帧动画
#1. 定义动画
@keyframes 动画名{
0%{ ... }
50%{ ... }
100%{ ... }
}
//开始状态和结束状态时，可以用from 和 to代替
#2. 调用动画
animation-name: 动画名称
animation-duration: 动画持续的时间
animation-timing-function: 动画的执行的速度,与transition属性相同
animation-delay: 延迟时间
animation-iteration-count: 动画执行的次数,可以是数字或者infinite（无限循环）
animation-direction: 是否循环交替反向播放动画,
normal( 正常播放 )
alternate(奇数次正向，偶数次反向)
alternate-reverse (奇数次反向，偶数次正向)
reverse( 反向播放 )
animation-fill-mode: 动画填充的模式,
forwards(动画结束后停在最后的位置)
backwards(保留动画开始的初始状态)
animation-play-state: 动画是否暂停,
running( 继续 )
paused( 暂停 )
#3. 请求动画帧 requestAnimationFrame
1. 屏幕刷新频率：屏幕每秒出现图像的次数。普通笔记本为60Hz（赫兹）
2. 动画原理：计算机每16.7ms刷新一次，由于人眼的视觉停留，所以看起来是流畅的移动。
3. 通过定时器达到的动画效果，容易卡顿抖动,原因是：
1、setTimeout异步加载，只有当主线程任务执行完后才会执行，因此实际执行时间总是比设定时间要晚
2、settimeout的固定时间间隔不一定与屏幕刷新时间相同，会引起丢帧
4. 每次刷新的间隔中会执行一次requestAnimationFrame函数，不会引起丢帧，不会卡顿