作者：新野时间：2018-04-2711:45Tranform变换一些常用的属性：transform:none|变换函数；[通过设置这个属性的值，我们就可以对元素进行transformation，具体的属性值下面会专门介绍。】transform-origin:x-axisy-axisz-axis;【设置元素变换的中心点，最直观的例子就是旋转图片，改变图片选择所依赖的旋转中心。】transform-style:flat|preserve-3d;【定义变换后的元素是显示在2D平面还是3D空间。说白了就是这个元素的空间维度是二维的还是三维的。】视角：数|none;[该属性定义了3D元素和视图之间的距离。设置后，其子元素会得到透视效果。需要注意的是这个值只对3D转换有效，这个也很好理解。另外，也可以通过Transform的属性值来设置。两者有一定的区别。你可以认为前者把整体看成一个阶段，后者把每个看成一个阶段。】perspective-origin：x轴y轴；【必须和perspective一起使用，只对3D转换元素有效，简单理解就是眼睛的重点。】背面可见性：隐藏|visible;【这个很简单，设置元素背面朝向屏幕时是否可见。】属性变换：无|上面介绍的变换函数；有很多方法可以使用。详情请参考文件API。这里不列出其含义。perspective(n)方法是为3D变换元素定义透视图，需要稍微注意一下，这几个方法比较特殊，后面会单独介绍。TransitionsTransition过渡：属性duration时序-函数延迟；请始终设置transition-duration属性，否则持续时间为0，将没有过渡效果。以上是统一设置，也可以单独设置各个属性。一些常用的属性：1.transition-property：指定设置过渡效果的CSS属性名称；2.transition-duration：指定完成过渡效果需要多少秒或多少毫秒；3.transition-timing-function：指定速度效果Curve的速度；4.transition-delay：定义过渡效果何时开始。Animation动画动画：名称durationtiming-functiondelayiteration-countdirection；请始终指定animation-duration属性，否则持续时间为0，动画将不会播放。以上是统一设置，也可以单独设置各个属性。一些常用的属性：1.animation-name：指定需要绑定到selector的关键帧名称；2.animation-duration：指定完成动画所需要的时间，以秒或毫秒为单位；3.animation-timing-function：指定动画的速度曲线；4.animation-delay：指定动画开始前的延迟时间；5.animation-iteration-count：指定动画应该播放的次数；6.animation-direction：指定动画是否依次反向播放；7.animation-fill-mode（可设置为none|forwards|backwards|both）：指定动画效果是在动画播放前还是播放后可见；8.animation-play-state（可设置为paused|running）：指定动画是运行还是暂停。这个属性可以在JavaScript中使用，让动画在播放过程中可以暂停；9.@keyframesanimName{from{}to{}}：定义动画名称为animName的动画关键帧。
