哎,虽然会用,但是从来没有系统的认知一下,一方面是为了系统的重新学习,另一方面是能够加深CSS3动画方面的认识。

W3C描述

css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。

语法

transition: property duration timing-function delay;
<!--默认值:all 0 ease 0-->
  • property:过渡效果的 CSS 属性的名称,这个实在太多了,比如:width、height、color、font-size等等,按我的理解是能够引发DOM重绘都将可以做为其属性参数,同时也包括:none、all。
  • duration:过渡效果需要多少秒或毫秒,务必每次都要设置,否则不能产生过渡效果。
  • timing-function:速度曲线,默认:ease。
    • ease:动画以低速开始,然后加快,在结束前变慢。
    • ease-in:动画以低速开始。
    • ease-out:动画以低速结束。
    • ease-in-out:动画以低速开始和结束。
    • linear:动画从头到尾的速度是相同的。
  • delay:何时开始。

示例

以下是我写的几个示例,有兴趣可以点它

硬件加速

虽然这种过渡效果非常棒,相比较javascript的模拟顺畅许多,然而假如我们过渡的属性会导致重绘的情况下,那么意味者浏览器在每一帧中都会引起重绘,CPU资源可想而之,特别是像移动端。

而解决办法是借助CSS的 transform 来调用GPU渲染CSS,简而言之,启用GPU过渡可以把元素当用图片来处理,从而避免重绘(关于重绘)。

transform: translate3d(0, 0px, 0px);
backface-visibility: hidden;

以上代码是来者淘宝首页的滚动轮播图,由于3D世界是可以看到背后的其他元素的,因此正常我们还需要加上 backface-visibility: hidden; 来防止看到背后的其他元素。

其实如果只是为了移动元素,我们也大可直接使用 translate3d,这样既能漂亮的过度又能得到GPU硬件加速,何乐不为呢?

但,这种虽然性能上得到解脱而本身还有很多副作用的,比如硬件加速会导致细微变化,很重要的是因为目前硬件加速还不支持亚像素的抗锯齿处理。而解决这个问题我们可以加上:

-webkit-font-smoothing: antialiased;

动画回调函数

在执行动画过程中浏览器会去监听 transitionEnd 事件,比如:(Demo

demo1El.height(200).one('transitionend', function(){
    alert('已经展开');
});

我觉得做为程序员还是需要适当的了解一下CSS3,假设能有适当的知识储备,我相信在WEB开发上面,才会写出更高效、更优美的代码。