动画

在手机上使用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;  　　控制动画暂停或播放