CSS中过渡（transition）学习

过渡（transition）

    CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。这个定义有种熟悉的感觉，它仿佛和animation非常相似，那么他们实际上有何区别呢？

 

1.CSS animation 与 CSS transition 的区别

    元素指定Transiton时，那么当其某个属性改变的时候就会按照Transition指定的方式进行过渡，动画就这么产生了。
Animation也是通过指定某一个属性（如width、left、transform等）在两个值之间如何过渡来实现动画的。

    指定Animation时可以通过keyframe显式控制当前帧的属性值，而Transition只能隐式来进行（不能指定每帧的属性值），所以相对而言Animation的功能更加灵活。

    另外一个区别是Animation通过模拟属性值改变来实现动画，动画结束之后元素的属性没有变化；而Transition确实改变了元素的属性值，动画结束之后元素的属性发生了变化；这一点，这在实际应用中会产生很大的区别，也决定了二者各有用处。或者这么说吧：transition： 强调过渡；

需要触发一个事件，比如鼠标移上去、焦点、点击。

animation：多个关键帧，实现自由动画；
不需要触发任何事件也可随时间变化达到一种动画效果；
与transition不同是animation可以通过@keyframe控制当前帧属性，更灵活。

 

2.简单说说

Transition作用是指定了某一个属性（如width、left、transform等&#x