高性能动画“box-shadow”属性

本文从《How to animate “box-shadow” with silky smooth performance》编译而来，英文没问题的同学，看原文找原味。
案例效果如下图所示，具体效果请移步demo。

为提高动画性能，应该减少页面的repaint次数。因此相对于直接动画“box-shadow”属性来说，使用伪对象的方式预先定义好阴影，然后动画opacity实现的方式性能更好。

/* 慢速方式 */
.make-it-slow { box-shadow: 0 1px 2px rgba(0,0,0,0.15); transition: box-shadow 0.3s ease-in-out: }

/* hover响应 */
.make-it-slow:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.3); }

/* 快速方式 */
.make-it-fast { box-shadow: 0 1px 2px rgba(0,0,0,0.15); }

/*利用伪对象预先定义好阴影，不过先隐藏起来 */
.make-it-fast:after { box-shadow: 0 5px 15px rgba(0,0,0,0.3); opacity: 0; transition: opacity 0.3s ease-in-out: }

/* hover之后显示出来 */
.make-it-fast:hover:after { opacity: 1; }

完整案例效果如下所示。

.box { position: relative; display: inline-block; width: 100px; height: 100px; background-color: #fff; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); border-radius: 5px; -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); }

.box:after { content: ""; border-radius: 5px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); opacity: 0; -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) }

.box:hover { -webkit-transform: scale(1.25, 1.25); transform: scale(1.25, 1.25) }

.box:hover:after { opacity: 1 }

That’s all.

声明
本文首发于极客头条。爱前端，乐分享。FedFun希望与您共同进步。
欢迎任何形式的转载，烦请注明装载，保留本段文字。
独立博客http://whqet.github.io
新浪微博http://weibo.com/FedFun
极客头条http://geek.csdn.net/user/publishlist/whqet