移动端 CSS3动画属性

transform : translate(50px,100px); //把元素水平移动 50 像素，垂直移动 100 像素transform : translateX(50px); //把元素水平移动 50 像素transform : translateY(100px); //把元素垂直移动 100 像素


transform : scale(2); //把元素宽高同时放大两倍transform : scale(2,4); //把元素宽度放大2倍，高度放大4倍transform : scaleX(0.5); //把元素宽度缩小一半transform : scaleY(1.2); //把元素高度放大1.2倍


transform : rotate(45deg); //把元素旋转45degtransform : rotateX(45deg); //把元素沿X轴旋转45degtransform : rotateY(45deg); //把元素沿X轴旋转45deg


transform : skew(30deg,20deg); //把元素沿水平方向倾斜30deg,沿垂直方向倾斜20degtransform : skewX(30deg); //把元素沿水平方向倾斜30degtransform : skewY(20deg); //把元素沿垂直方向倾斜20deg


每个元素只能设置一个transform属性，可以同时设置多个值,如:transform: rotate(30deg) translate(50px) scale(2);


transition-property : css的属性名称 或者alltransition-duration : 动画持续的时间transition-timing-function : 动画的执行的速度
ease:平滑运动
linear：线性运动
ease-in:逐渐加速 速度越来越快
ease-out:逐渐减速速 速度越来越慢
ease-in-out:先加速再减速 速度先变快再变慢transition-delay : 动画延迟时间


transitionend css过渡效果结束后执行的事件一般不分开设置，直接写复合属性, transition: all 2s linear 2s;


@keyframes 动画名{
0%{ ... }
50%{ ... }
100%{ ... }
}
//开始状态和结束状态时，可以用from 和 to代替


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( 暂停 )


1. 屏幕刷新频率：屏幕每秒出现图像的次数。普通笔记本为60Hz（赫兹）2. 动画原理：计算机每16.7ms刷新一次，由于人眼的视觉停留，所以看起来是流畅的移动。3. 通过定时器达到的动画效果，容易卡顿抖动,原因是：
1、setTimeout异步加载，只有当主线程任务执行完后才会执行，因此实际执行时间总是比设定时间要晚
2、settimeout的固定时间间隔不一定与屏幕刷新时间相同，会引起丢帧4. 每次刷新的间隔中会执行一次requestAnimationFrame函数，不会引起丢帧，不会卡顿