transition动画效果html,CSS3第十课：transition过渡动画(内附神器！)

在十年前，我用flash做动画的时候，总结了一下flash的运动规律，主要有形状、大小、位置、角度、颜色、透明度、加减速等变化。没想到移动端异军突起，似乎一夜之间，flash就没落了。想起自己曾经每天必逛的闪吧，在2012年也停止更新，虽然现在网站还在， 但也只是一个象征了，偶尔回去悼念一下，怀念过去在上面留下的时光。

不知道那些出名的闪客现在都从事什么行业了~~~

现在电脑里面还保存着阿桂动画整个系列，皮三的哐哐哐系列，满满的回忆啊。

flash在web端没有立足之地，连最后的流媒体视频格式也要被HTML5的音视频标准给革命了，flash算正式落幕，曾经经常骚扰我们的flash player也不再需要安装了……

扯远了>_<

其实transition结合transform差不多可以完成flash的大部分补间动画，不，过渡动画。

一、transition过渡动画

当元素的样式从一种状态变成另一种状态的时候，产生平滑的过渡效果。

注意：transition只能在两种不同的状态之间产生过渡动画，不能有两种以上的状态，这和animation动画不一样，所以论武力值，transition只能算阉割版的animation。

可以把第一个状态表示为初始值。第二个状态表示为结束值。

比如颜色从黑色变成白色，宽度从100px变成200px，透明度从1变成0.5等等，这都属于一个样式状态的变化。

所以要对一个元素做过渡动画，必须有两个要素要满足：

1、哪个对象要做动画。

2、动画要执行多长