Question

CSS animation 与 CSS transition 有何区别

Answer 1

Transition：对元素某个属性或多个属性的变化，进行控制(时间等)，类似flash的补间动画。但只有两个关键贞。开始，结束。

Animation：对元素某个属性或多个属性的变化，进行控制(时间等)，类似flash的补间动画。可以设置多个关键贞。

Transition与Animation区别:

transition需要触发一个事件,而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果。

Transition:

transition属性是一个简单的动画属性，非常简单非常容易用。可以说它是animation的简化版本，是给普通做简单网页特效用的。比如你有如下两个样式：

.position{

left:100px;

top:100px;

}

.animate{

-webkit-transition:left0.5sease-out;

left:500px;

top:500px;

}

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

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

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

Animation:

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

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

@keyframes'wobble'{

0%{

left:100px

}

30%{

left:300px;

}

100%{

left:500px;

}

}

.animate{

left:100px;

-webkit-animation:wobble0.5sease-out;

-webkit-animation-fill-mode:backwards;

}

上面这个代码展示了一个keyframes'wobble'，其中0%代表在变化中不同时间点的属性值，可以较精确的控制动画变化中任何一个时间点的属性效果。而animation则根据这个keyframes提供的属性变化方式去计算元素动画当中的属性。与transition不同的是，keyframes提供更多的控制，尤其是时间轴的控制，这点让cssanimation更加强大，使得flash的部分动画效果可以由css直接控制完成，而这一切，仅仅只需要几行代码，也因此诞生了大量(比起flash来说算是大量了)基于css的animationtools，用来取代flash的动画部分。关于动画工具，可以参考Webstandards-basedAnimationTools.

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

Answer 2

css animation可以创建动画；css transition 是一种过渡，在我们实现效果从一种样式转变成另一种的时候用。