CSS3 -- 区别Transform,Transition,Animation一句话(转)

要很好理解动画，建议可以先学习下flash，入门级别就可以了!

 

Transform：对元素进行变形；

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

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

  animation功能与transition都能通过改变css的属性值来实现动画效果，他们的不同之处是：transition只能指定属性的开始值和结束值来达到渐变，不能像animation那样定义关键帧来实现比较复杂的动画效果。

Transition与Animation:

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

 

Transition作用是指定了某一个属性（如width、left、transform等）在两个值之间如何过渡，他包括transition-property、transition-duration、transition-timing-function、transition-delay等。 如果某一个元素指定了Transiton，那么当其某个属性改变的时候就会按照Transition指定的方式进行过渡，动画就这么产生了。
Animation也是通过指定某一个属性（如width、left、transform等）在两个值之间如何过渡来实现动画的，与Transition不同的是，Animation可以通过keyframe显式控制当前帧的属性值，而Transition只能隐式来进行（不能指定每帧的属性值），所以相对而言Animation的功能更加灵活。
另外一个区别是Animation通过模拟属性值改变来实现动画，动画结束之后元素的属性没有变化；而Transition确实改变了元素的属性值，动画结束之后元素的属性发生了变化；这一点，这在实际应用中会产生很大的区别，也决定了二者各有春秋。
Animation模块包括了animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-play-state等属性。 其实说这么多，一句话就是：Transform和width、left一样，定义了元素很多静态样式，只不过通过Transition和Animation指定如何改变不同的属性值，才实现了动画。

用法

div {
  transition: <property> <duration> <timing-function> <delay>; }

并且有事件可以监测 transition 结束

el.addEventListener("transitionend",updateTransition,true); //in webkit el.addEventListener("webkitTransitionEnd",updateTransition,true);

原文链接：http://www.cnblogs.com/lufy/archive/2012/05/09/2491384.html

 

 

转载于:https://www.cnblogs.com/zxHappy/p/5434892.html