移动端 CSS3动画属性

一、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

#三、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函数，不会引起丢帧，不会卡顿