How to make a transition effect using the transform origin?

Question

ul li {
  list-style: none;
  display: inline-block;
  padding: 0 20px;
}

.fancy-link {
  color: black;
  font-weight: 700;
  text-decoration: none;
  position: relative;
}

.fancy-link::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: blue;
  left: 0;
  bottom: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: 0.5s all ease-in;
}

.fancy-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

<nav>
  <ul>
    <li><a class="fancy-link" href="#">Home</a></li>
    <li><a class="fancy-link" href="#">Services</a></li>
    <li><a class="fancy-link" href="#">Projects</a></li>
    <li><a class="fancy-link" href="#">About</a></li>
    <li><a class="fancy-link" href="#">Contact</a></li>
  </ul>
</nav>

So... as you can see, The pseudo element is to come in from the left and leave towards the right, but if you run the code you'll see that it comes from the right and leave towards the right, Please i need the pseudo content to come in from the left and leave towards the right,I'm sure the transform origin property and attribute i used is correct.

score 0 · Accepted Answer · answered Jun 29 '22 at 13:02

In the transition you specified all but the only property you need to animate is transform (and not also transform-origin)

ul li{
    list-style: none;
    display: inline-block;
    padding: 0 20px;
}
.fancy-link{
    color: black;
    font-weight: 700;
    text-decoration: none;
    position: relative;
}
.fancy-link::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: blue;
    left: 0;
    bottom: 0;
    transform: scaleX(0);
    transform-origin: right;
    transition: 0.5s transform ease-in;
}
.fancy-link:hover::after{
    transform: scaleX(1);
    transform-origin: left;
}

<nav>
  <ul>
    <li><a class="fancy-link" href="#">Home</a></li>
    <li><a class="fancy-link" href="#">Services</a></li>
    <li><a class="fancy-link" href="#">Projects</a></li>
    <li><a class="fancy-link" href="#">About</a></li>
    <li><a class="fancy-link" href="#">Contact</a></li>
  </ul>
</nav>

How to make a transition effect using the transform origin?

1 Answers1