CSS Transform / Transition / Animation 属性的区别

CSS3中和动画有关的属性有三个 transform、 transition 和 animation。下面来一一说明:

一、transform

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

transform属性是静态属性，一旦写到style里面，将会直接显示作用，无任何变化过程。transform的主要用途是用来做元素的特殊变形，对于做设计的人来说并不是很陌生，简单的来说就是css 的图形变形工具。

二、transition

css的transition允许css的属性值在一定的时间区间内平滑地过渡。可以说它是animation的简化版本，是给普通做简单网页特效用的。

三、animation

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

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

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

把 “myfirst” 动画捆绑到 div 元素，时长：5 秒：

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s;  /* Safari 和 Chrome */
-o-animation: myfirst 5s;   /* Opera */
}