动画
在手机上使用CSS动画时很多时候会感到卡顿，然后网上很多教程说开启GPU加速可解决
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
2D & 3D 转换
转换的英文表示为： transform, 这两个转换都是用的这个英文
这里我们还要注意一点，在我们使元素绕Y轴旋转以后，其实X轴和Z轴也会跟着旋转，所所以正方体的每个面的垂直线还是Z轴
两者功能对比如下：
2D:旋转、位移、缩放、倾斜、复合 3D:旋转、位移、缩放、
两者样式对比如下：
2D:
transform :
rotate(angle): 先当于绕z轴转动
translate(x,y): 沿着 X 和 Y 轴移动元素
translateX():
translateY():
scale(x,y): 改变元素的宽度和高度
scaleX(x): 改变元素的宽度
scaleY(y): 改变元素的高度
skew(x-angle, y-angle):
skewX(angle):
skewY(angle):
matrix():
transform-origin: x, y, z
x: left center right length %
y: top center bottom length %
z: length
transform-style: flat preserve-3d flat: 所有子元素在2D平面呈现
preserve-3d: 所有子元素在3D空间中呈现
3D:
transform :
rotate3d(x,y,z,angle): rotate3d(0,1,0,10deg) = rotateY(10deg)
rotateX(angle):
rotateY(angle):
rotateZ(angle):
translate3d(x,y,z):
translateX(x):
translateY(y):
translateZ(z):
scale3d(x,y,z):
scaleX(x):
scaleY(y):
scaleZ(z):
matrix3d():
transform-origin: x, y, z
x: left center right length %
y: top center bottom length %
z: length
transform-style: flat preserve-3d
flat: 所有子元素在2D平面呈现
preserve-3d: 所有子元素在3D空间中呈现
perspective:
perspective-origin:
backface-visibility: visible | hidden
visible: 当元素不面向屏幕时,背面是可见的
hidden: 当元素不面向屏幕时,背面是不可见的
过渡
直接作用在一个html元素上面， 针对该元素的所有的样式变换都会触发该过渡效果
transition: property duration timing-function delay, ...
transition-property: none all property
none: 没有属性会获得过渡效果
all: 所有属性都将获得过渡效果
property: 应用过渡效果的 CSS 属性(逗号分隔)\
transition-duration: time
time: 完成过渡效果需要花费的时间（以秒或毫秒计）,默认值是 0，意味着不会有效果, 5s, 5ms
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)
linear: 以相同速度开始至结束的过渡效果
ease: 慢速开始，然后变快，然后慢速结束的过渡效果 (默认效果)
ease-in: 以慢速开始的过渡效果
ease-out: 以慢速结束的过渡效果
ease-in-out: 以慢速开始和结束的过渡效果
cubic-bezier: 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值
transition-delay: time
time: 指定秒或毫秒数之前要等待切换效果开始
动画
@keyframes animationname {
keyframes-selector {css-styles;}
}
animationname: 定义animation的名称
keyframes-selector: 0 - 100% | from to
css-styles: 一个或多个合法的CSS样式属性
animation: name duration timint-function delay iteration-count direction fill-mode play-state
name:
duration:
timing-function: steps(n, start|end)
delay:
iteration-count: n | infinite; 动画应该播放多少次
direction: normal | reverse | alternate | alternate-reverse | initial | inherit
normal: 动画按正常播放 (默认值)
reverse: 动画反向播放
alternate: 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放
alternate-reverse: 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放
initial: 设置该属性为它的默认值
inherit: 从父元素继承该属性
fill-mode: none | forwards | backwards | both | initial | inherit
none: 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素
forwards: 动画停止时，保留该位置（否则会回到原位）
play-state: paused | running; 控制动画暂停或播放
