css3动画2 transition 详解（共含有transform transition animate）

 

                         CSS3 Transition详解

   几个让人头大的单词，可能会混淆，尤其是你过一段不用的话肯定会搞不清各自的意思

transform

translate

transition   今天主要说transition 中文意思过渡，顺便在说一下transform 和translate,transform 是变形的意思，平移，缩放，旋转，扭曲都是变形的一种，translate 是平移的意思，translate 是属于transform 的一种，transform 跟 transition 是平级的概念。 

       transition 是过渡的意思，你会如果理解这个词，或者说提到这个这个词你会有什么反应，说实话，当我第一次接触到这个词属性的时候我有点蒙，单纯从字面上还是不太好理解，当我写了几个例子以后对这个东西有了直观的感受，过渡其实就是一段动画，例如有一段动画是一个矩形从坐标（0,0） 移动到了（100,100），你看到了这个移动的过程，那么这就是一种过渡，这时候有人会说过渡其实就是让你看到了transform的过程，例如你使用translate（100,100） 我们就可以通过transition 看到 translate 的过程，这个是可以的，transition 是可以对transform 的所有属性进行过渡，但是不是仅限于transform transform 更多是对形状上的变换，而transition 还可以对另外一大类颜色变换进行过渡，例如，一个div 是background 是红色，你后来修改为紫色，你就可以使用css3的transition 属性看到div 从红变紫色的过程，是不是很奇妙。

下边两个例子看看过渡的效果

这是测试图形

 

 

 

transition 有几个重要的熟悉，transition-property ，transition-duration ,transition-time-function,transition-delay 四个参数

 

transition-property

这个参数是稍微最理解的一个，为什么要设置这个参数让你会感到困惑，这时候就要问自己几个问题

1：为什么需要过渡

2：过渡的结果是什么

第一个好回到，当然过渡就是为了效果更漂亮，

   

 待续。。。。。。。。。。。。。。，iteye 的编辑器没办法插入script 控制代码，有些例子没法写进去