為提高動畫效能，應該減少頁面的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: 100
 
px;
  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
極客頭條