Search code examples
csscss-transitionsscalecss-transforms

CSS transform scalex line unconsistant height

I have a hover animation on a link. A line is drawn below the text. It's 2px in height. the problem is that it starts with one height and continues with another height.

  • Why is it doing that? It does not need to calculate anything because 2px is a fixed number.
  • How can I get around it?

The animated GIF is taken in Chrome.

enter image description here

:root {
  --cp-500: #c53e3a;
  --cp-700: #8d1d2d;
  --cp-800: #721228;
}

.action a {
  background: linear-gradient(45deg, var(--cp-500), var(--cp-800));
  color: #fff;
  border-radius: 100vh;
  padding: .5rem 2rem;
  display: inline-block;
  border: 1px solid var(--cp-700);
  transition: box-shadow 150ms ease-in;
  box-shadow: 0 1.25rem 1rem -1rem var(--cp-800);
  z-index: 1;
  text-decoration: none;
  position: relative;
 }

.action a:hover {
  box-shadow: 0 1rem 1rem -1rem var(--cp-800);
  background: var(--cp-700);
}

.action a:before {
  content: '';
  position: absolute;
  bottom: .5rem;
  left: 2rem;
  width: calc(100% - 4rem);
  height: 2px;
  background: var(--cp-500);
  transform: scaleX(0);
  transform-origin: top right;
  transition: transform 1000ms ease-in;
  z-index: -1;
}

.action a:hover:before {
  transform-origin: top left;
  transform: scaleX(1);
}
<div class="action">
   <a href="#">Test</a>
 </div>

Solution

  • I was also able to reproduce your issue. As AlexioVay mentioned above, you should add a scaleY also. But it's not enough, you should set the scaleY to be almost the same as scaleX. Now the line has the same height from the start till the end. See this code: https://jsfiddle.net/q236tmuk/30/

    I added the following change to your css:

    .action a:hover:before {
  transform-origin: top left;
  transform: scaleX(1) scaleY(0.99);
}

    The following scenario will also work well:

    .action a:hover:before {
  transform-origin: top left;
  transform: scaleX(1) scaleY(1.01);
}

    On hover the line height is the same from the start till the end. Don't use the same value for scaleX and scaleY, because that way the height will change after the transform event. It's a browser issue. The only solution is to use a small different value for scaleY.