CSS Transform / Transition / Animation 属性的区别

 

back21 Jun 2011 Category: tech Tags: css

最近想UI的动画转到css3能吃进3d加速的属性上面来以增强动画的连贯性。只是对于css几个新加的属性不太熟悉，经常容易搞混。研究了点资料，总结一下。

Introduce

Transform

在部分的test case当中，往往演示transform属性的，看起来好像都是带动画。这使得小部分直觉化思惟的人（包括我）认为transform属性是动画属性。而偏偏相反，transform属性是静态属性，一旦写到style里面，将会直接显示做用，无任何变化过程。transform的主要用途是用来作元素的特殊变形，对于作设计的人来讲并非很陌生，简单的来讲就是css 的图形变形工具。

关于图形变形的基础条件当中的原点设定，在css里面使用的是transform-origin来定义的。这个定义的原点应该是该css做用的元素的左上角为0,0来计算的（有待研究）。其余的属性则根据这个属性来计算进行计算。

关于图形变化的模式，css3标准当中transform-style来定义。默认是flat，展示出来的是简单的效果。而preserve-3d则将空间呈现为3d模式。从正常的思惟来讲，应该只须要preserve-3d就行了，可是从谣传“开启了perserve-3d就使用了GPU加速”来讲，这个属性多是为了下降系统消耗用的，毕竟3d比2d要多一个维度的计算。

若是须要使用3d模式，必须先指定style为3d，并在任意父元素上增长 perspective及 perspective-origin 来指定透视点。

具体的给设计师改变元素样式用的属性则有如下五个：

• translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的；
• rotate(deg)是用来控制元素旋转角度的；
• skew[x,y](deg) 这个属性是用来制做倾斜度的，作过设计的人可能会知道，这个是用来在2d里面建立3d透视图的时候必须的属性；
• scale3d(x,y,z) 用来放大缩小效果，属性是比值；
• matrix3d，css矩阵。经过这个矩阵属性，涵盖了上面全部的属性值，可是我的以为可读性极差（全都是数字和单位，背起来有点模糊），目前没有理由推荐使用。

整体看来 css transform的属性和原来使用的left ，right ，top， bottom 的属性从动静角度来讲没有任何区别，所以使用的时候应该将transform归类到这类定位变形的静态属性里面。

Transition

transition属性是一个简单的动画属性，很是简单很是容易用。能够说它是animation的简化版本，是给普通作简单网页特效用的。好比你有以下两个样式：

.position{
    left:100px;
    top:100px;
}
.animate{
    -webkit-transition:left 0.5s ease-out;
    left:500px;
    top:500px;
}

其中animate的transition的属性的意思说：当你的left属性发生变化的时候，执行动画效果（仅仅基于left的属性变化，其余的属性不会加入到动画变化里面去）；

首先你的元素的css为position。当你将其cssList 增长 animate 或者替换position 为animate的时候，元素的属性变化，触发webkit-transition，以指定属性变化前的值为起始值，变化后的属性为结束值，执行动画效果。这是一个简单的两点变化过程，大大简化了animation属性的复杂程度。

同时，若是在transition的动画当中，属性值有了新的变化，则会中断当前的动画执行，并将中断时的属性值提供给新的动画做为起始值来计算新的动画效果。

我在css编写的时候，由于变化的属性只有transform一个，所以在transtion属性里面指定响应属性为all，能够响应并执行元素全部属性的变化动画（能作动画的属性）。

Animation

在官方的Introduction上介绍这个属性是transition属性的扩展。可是这个简单的介绍里面包含了不简单的东西：keyframes。

作过Flash动画的人都会知道，Flash里面有两个基础武器：时间轴和关键帧。而css keyframes的出现，则是提供了flash世界里面的这两个属性的合集。看一个简单的 keyframes 的示例：

@keyframes 'wobble'{
  0%{
   left:100px
}
   30%{
   left:300px;
}
  100%{
   left:500px;
}
}
.animate{
	left:100px;
   -webkit-animation:wobble 0.5s ease-out;
   -webkit-animation-fill-mode:backwards;
}

上面这个代码展现了一个keyframes 'wobble'，其中 0％ 表明在变化中不一样时间点的属性值，你能够较精确的控制动画变化中任何一个时间点的属性效果。而animation则根据这个keyframes提供的属性变化方式去计算元素动画当中的属性。与 transition 不一样的是，keyframes提供更多的控制，尤为是时间轴的控制，这点让css animation更增强大，使得flash的部分动画效果能够由css直接控制完成，而这一切，仅仅只须要几行代码，也所以诞生了大量（比起flash来讲算是大量了）基于css的animation tools，用来取代flash的动画部分。关于动画工具，能够参考Web standards-based Animation Tools.

另外在animation属性里面还有一个最重要的就是：animation-fill-mode，这个属性标示是以(from/0%)指定的样式 仍是以(to/100%)指定的样式为动画完成以后的样式。这个很方便咱们控制动画的结尾样式，保证动画的总体连贯。

Resources

• CSS Animations @W3C
• CSS 2D Transforms @W3C
• CSS 3D Transforms Module Level 3 @W3C
• Animation.css This is a animation library just made by css.
• Personal css animation collection

UPDATE

• [2012-04-20] Add introduce about animation-fill-mode. Add resources.
• [2011-06-21] Fixed style, add animation tools introduce.

-- EOF --