Animation Going The Oppposite Way After Cursor Leaves The Element

JAYAJYAYA 0
Viewed 17

So i'm currently making an aniamted underline that goes from left to right:

When the user's cursor stops hovering, i want the underline to go sliding towards the right hand side.

Is there any possible way to actually do this? Thanks

HTML:

<html lang="en">
<head>
  <!--Linking All Fonts / Files-->
  <link rel="stylesheet" href="css/style.css">
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated NavBar</title>
</head>
<body>
  <nav>
    <a href="#">HOME</a>
    <a href="#">ABOUT</a>
    <a href="#">PORTFOLIO</a>
    <a href="#">SERVICES</a>
    <a href="underlineani.html">UNDERLINE</a>
    <div class="animation start-home"></div>
  </nav>
</body>
</html>```

    And here is my css code to style:
    
    ```    nav .a-underline::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      --background-color: #E3E3E3;
      --border-size: 2px;
      --border-width: 5px;
      --border-radius: 8px;
      --accent-color: #0AF;
      height: var(--border-size);
    
      background-color: var(--accent-color);
      transition: transform 800ms ease-in-out;
    
      transform:scaleX(0);
      transform-origin: left;
    }
    
    nav .a-underline:hover::before,
    nav .a-underline:focus::before {
      transform: scaleX(1);
      transform-origin: left;
    }
    
    nav .a-underline:not(:hover)::after,
    nav .a-underline:not(:focus)::after {
      transform: scaleX(1);
      transform-origin: right;
    } ```
visual-web-developer web css html
1 Answers

Yeah you can do this by adding another transition: transform 800ms ease; to the hover state and switching the normal state transform-origin to right; and the hover off's state to left

Heres a working example:

nav .a-underline::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      --background-color: #E3E3E3;
      --border-size: 2px;
      --border-width: 5px;
      --border-radius: 8px;
      --accent-color: #0AF;
      height: var(--border-size);
    
      background-color: var(--accent-color);
      transition: transform 800ms ease-in-out;
    
      transform:scaleX(0);
      transform-origin: right;
    }
    
    nav .a-underline:hover::before,
    nav .a-underline:focus::before {
      transform: scaleX(1);
      transform-origin: left;
      transition: transform 800ms ease;
    }
    
    nav .a-underline:not(:hover)::after,
    nav .a-underline:not(:focus)::after {
      transform: scaleX(1);
      transform-origin: right;
      
    } 
<html lang="en">
<head>
  <!--Linking All Fonts / Files-->
  <link rel="stylesheet" href="css/style.css">
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated NavBar</title>
</head>
<body>
  <nav>
    <a href="#">HOME</a>
    <a href="#">ABOUT</a>
    <a href="#">PORTFOLIO</a>
    <a href="#">SERVICES</a>
    <a class="a-underline" href="underlineani.html">UNDERLINE</a>
    <div class="animation start-home"></div>
  </nav>
</body>
</html>

userdxCK0
Related