CSS-Transform-transition-Animation

Transform

  根据我的理解，transform和width、height、background一样，都是dom的属性，不同的是它是css3旗下的，比较屌，能够对原来的dom元素进行移动、缩放、转动、拉长或拉伸，跟canvas上的某些api神似，这么说来transform好像能干些js才能干的事。

  transform分2D变换和3D变换，w3school中有很好的介绍和例子

 

Transition

注意：在变换属性时，变换前的属性值必须定义；不然会没有效果；

例:想让width从   100px  --->  200px  时，前边的100px必须指明。主要用在    img   的 宽高是要注意

  transition的解释是过渡，我的理解是css之间的变换，但是这个变换很屌很平滑，类似动画。举个栗子，一开始某个dom的类是classA，通过某种操作（比如被点击了）后变成了classB，如果没有transition，类之间的变换是很快的，机械般瞬间完成，但是有了transition，这便会是一个很缓和平滑的过程。

transition有4个属性：语法：transition: property duration timing-function delay  从前到后4个属性依次可理解成“过渡动画变换的属性”、“过渡花费时间”、“过渡过程的速度变化”和“过渡开始前的等待时间”（默认值：all 0 ease 0 前两个是必须的 后两个可省略）。

过渡属性:

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

Animation

  Animation的解释是动画，加强版的transition。

  如果说transition能实现某些js效果，animation就更像是js了。类似于写一个canvas特效，特效总共比如说多少时间，我们能规定在什么时候该出现什么样的场景，而各个场景间的转换则完全由css3本身负责，而keyframes好比定义了一个js方法。

   主要应用在某个元素需要进行连续的n次css变换。

动画属性:

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3
animation-fill-mode	规定对象动画时间之外的状态。	3