High performance Animation "Box-shadow" property

This article from "How To animate" Box-shadow "with silky smooth performance" compiled, English no problem classmate, look at the original text to find original.
Case effect as shown in the figure below, the specific effect please go to the demo.
! [Case Presentation] (http://img.blog.csdn.net/20151123083204051

To improve animation performance, you should reduce the number of repaint pages. As a result, the shadow is pre-defined using a pseudo-object relative to the direct animation "Box-shadow" property, and the animation opacity implemented in a better way.

/* Slow way *
/. Make-it-slow {
  box-shadow:0 1px 2px rgba (0,0,0,0.15);
  Transition:box-shadow 0.3s ease-in-out:
}/

* Hover response */
. make-it-slow:hover {
  box-shadow:0 5px 15px RGBA (0,0,0,0.3);
}

/* Quick Way *
/. make-it-fast {
  box-shadow:0 1px 2px rgba (0,0,0,0.15);
}

/* Use pseudo-objects to pre-define shadows, but hide them first *
/. 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 after display */
. make-it-fast:hover:after {
  opacity:1;
}

The full case effect is shown below.

. 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.

Declaration
This article starts with the geek headline. Love front end, music share. Fedfun hope to make progress together with you.
Welcome any form of reprint, please indicate loading, keep this paragraph text.
Standalone Blog Http://whqet.github.io
Sina Weibo http://weibo.com/FedFun
Geek headlines