silkySmoothBoxShadow.md

How to animate box-shadow with silky smooth performance

SOURCE

SCSS version

@mixin animated-box-shadow($border-radius) {
  position: relative;
  cursor: pointer;
  background-color: $color-white;
  border-radius: $border-radius;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
  -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);

  &::after {
    content: "";
    border-radius: $border-radius;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 5px 30px rgba(129,152,213, 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);
  }

  &:hover {
    -webkit-transform: scale(1.25, 1.25);
    transform: scale(1.25, 1.25);
    z-index: 2;
  }

  &:hover::after {
    opacity: 1;
  }
}

// Use like this
.box {
  height: 80px;
  width: 220px;
  padding: 19px;
  @include animated-box-shadow(10px);
}