本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异，关于具体解决方法或如何规避问题的意见可以参考另一篇非常有见地的文章，“All You Need to Know About CSS Transitions”。Alex MacCaw讲述的是关于实现特定的效果，而我要谈的是技术背景，主要讨论在使用CSS过渡的过程中所未预料到的问题。
结构 (HTML)，表现(CSS)，以及行为(JavaScript)相分离并不是什么新鲜的事情，然而 CSS 能跨越这个界限并且可以在短期内得到实际的应用，这还真的是一个完全不同的讨论话题。
几周前，我开发一个 JavaScript 模块，在能够使用 CSS 过渡的条件下，JavaScript 端又无法获取到实现过渡的方式。实际遇到的问题是这两者根本没有办法同步，经过多次的测试后，我只能放弃。而我的测试结果正是本文所讲述的。
首先，我们要说一下getcomputedstyle()，是一种用 JavaScript 返回浏览器渲染CSS的属性值的方法。 这个方法可以查看“DOM Level 2: getComputedStyle()”和“CSS Level 2: Computed Values”。
这对于像 font-size 这样的属性, 通过一个参数便可以转换为像素值。 但对于可以缩写的属性值，例如 margin ，一些浏览器则返回为空。再就是那些同一属性的不同属性值，例如 font-weight 的值 bold 和700。WebKit也有一个小bug，它会从伪对象中提取出属性值。
这里所讲述的浏览器之间的差异是2013年1月在使用 Firefox18（Gecko），Opera 12.12 （Presto）, Internet Explorer10（Trident），Safari 浏览器6.0.2（WebKit），Chrome 23（WebKit） 以及 Gecko 和 WebKit的 Nightly build channels。
事不宜迟，让我们来一起看一下规范与实际情况的差异，为了方便，我省略了各浏览器的前缀。在文中我通过创建一个 CSS3 Transitions Test Suite 来发现问题。
1、指定过渡CSS3 transitions 规范定义了以下四个 CSS 属性：
- transition-property
- transition-duration
- transition-delay
- transition-timing-function
xa0过渡属性transition-property 是用来指定当元素其中一个属性改变时执行 transition 效果。系统默认值是 all，这意味着浏览器能够以动画形式呈现所有的可过渡属性（transition-duration持续时间超过0s），该属性支持单个值或以逗号隔开的多个值列表（跟其他所有transition-*属性一样）。
规范规定，一个浏览器应该接受并保存任何它不能识别的属性。因此，下面的例子中将会看到持续2秒的 padding 过渡：
transition-property:foobar,padding; transition-duration:1s,2s;不同于规范的是，上面的情况在 WebKit 下会解析为 transition-property: all。 而 Firefox 和 Opera 会解析为 transition-property: all, padding.
过渡持续时间transition-duration 属性规定了一个过渡从初始状态到目标状态的持续时间。它接受以秒或毫秒的值（例如，2.3S和2300ms都是指2.3秒）。尽管规范明确规定了过渡值必须为正数，但 Opera 仍接受-5S的值，至少对于getComputedStyle（）来说是这样的。虽然规范中并没有限制属性值的大小，但 Opera 和 IE 不接受低于10ms的值。而 WebKit 在 getComputedStyle（）执行中有个小bug，例如：返回值0.009999999776482582s会取代0.01s。
过渡延迟时间transition-delay 属性规定了在执行一个过渡之前的等待时间，同样使用值。Delay 可以是负值，但这会导致动画无法平滑过渡。IE 和 Opera 不接受 transition-duration 在-10ms和10ms之间的值。WebKit 的 floating point 也会在这儿出现。
transition-timing-function 属性规定了过渡效果的时间曲线。包括cubic-bezier（x1, y1, x2, y2）, step（, start|end），和预先定义的 cubic-bezier 曲线关键词，linear, ease, ease-in, ease-out和ease-in-out。在使用 LEA Verou 特有的 cubic-bezier 曲线编辑器时，cubic-bezier 背后的公式就变得不再重要。尽管 cubic-bezier 曲线会平滑过渡，但是step()函数会在一个固定的间隔跳到下一个值。这样便会产生逐帧动画的效果；如“Pure CSS3 Typing Animation With steps()”。
linear 的计算值通常表示为 cubic-bezier（0, 0, 1, 1）—— WebKit除外。但 WebKit 仍然会返回 cubic-bezier（0.25, 0.1, 0.25, 1），而不是 ease。规范规定 X 值的必须介于0和1之间，y 值可以超过该范围，而WebKit 允许 X 超过此范围，而 Android 浏览器（4.0版本）却混淆了x和y的范围。