Box Shadow - remove fade in/out-CodePudding

The transition of the box-shadow makes fade in/out effect of the box shadow. It is visible when you set a slow transition.

Is possible to remove this fade effect, that shadow appears only by x and y position?

Example: https://codepen.io/crowscript/pen/yLvpKNa

CodePudding user response：

If you want to remove the transition completely, you can delete this line:

transition:box-shadow 2s ease-out

Or if you want to keep the transition but have it fade-in in place, you need to set the shadow on the element then transition the colour.

a {
  display: inline-block;
  color: #FFF;
  background-color: #333;
  padding: 1rem;
  transition: box-shadow 2s ease-out;
  box-shadow:1rem 1rem 0 0 transparent;
  &:hover {
      box-shadow: 1rem 1rem 0 0 #c00000;
  }
}

Full snippet here: https://codepen.io/29b6/pen/poapLpP

CodePudding user response：

If you pre-define the box-shadow on the initial element, it will not have the fade effect. See my example:

a {
  display: inline-block;
  color: #FFF;
  background-color: #333;
  padding: 1rem;
  transition: box-shadow 2s ease;
  box-shadow: .01rem .01rem 0 0 #c00000;
}

a:hover {
  box-shadow: 1rem 1rem 0 0 #c00000;
}

<div >
  <a href="#">
      Test link
  </a>
</div>