css3动画2 transition 详解(共含有transform transition animate)

liusure0 2015-06-11

 

                         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:过渡的结果是什么

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

   

相关推荐