[CSS3备忘] transform animation 等

一些CSS不经常用就会忘记，好吧，现在整理再学习一下，也留做备忘，方便以后查看。。。

perspective的理解:

　　1、数值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻（比如看电影，越前面的人屏幕越大）

　　2、数值大，用户与3D空间Z平面距离越远，视觉效果就很小

　　3、数值无穷大 | 为0  == none 即：无透视

　　4、perspective分为perspective属性和perspective函数,两者的区别：

　　　　　　perspective属性在父元素中添加，为none | 长度值，perspective函数在子元素添加（与tranform一起使用）,数值>0;

　　　　　　perspective属性，有多个元素，看到的效果是不一样的，perspective函数，有多个元素，看到的效果是一样的，请见张旭鑫的deom:舞台多元素下的perspective两种书写对比demo

　　5、当父元素perspective:200px时，子元素transform:translateZ(200px)会辅满整个屏幕（没有设置display:hidden，如果设置会不起作用），当>200px，会看不到（以电影幕为例，人跑到电影幕后面去，看不到后面的东西）

perspective-original:X方向 Y方向

transform-style :preserve-3d    | transfrom:transformZ()开启3D效果

backface-visibility: visible | hidden

参考：

　　1、大漠的Transform-style和Perspective属性

　　2、张旭鑫的好吧，CSS3 3D transform变换，不过如此！

animation和transition

animation:　animation-name　　animation-duration　　animation-timing-function　　animation-delay　　animation-iteration-count　　animation-direction　　animation-fill-mode　　animation-play-state

(none 0s ease 0s 1 normal none running)

　　animation-name:none

　　animation-duration:0s

　　animation-timing-function:ease

　　animation-delay:0s

　　animation-iteration-count:1 | infinite

　　animation-direction:normal | reverse | alternate(交替) | reverse-alternate

　　animation-fill-mode:none | forwards(最后一帧) | backwards(第一帧) | both

　　animation-play-state:running | pause

transition:　　transition-property　　transition-duration　　transition-timing-function　　transition-delay