Why does changing the width of div::before (on hover) work correctly at first, but fault thereafter?

user_2498890 0
Viewed 106

I'm trying to create a sort of "shooting star" animation on a button underline on hover. I've successfully achieved what I want and it's firing correctly on the first hover, but if you hover over it again the transition is glitchy and doesn't work as intended. The more you hover over it the less the width changes to the point where it no longer works.

I wondered if someone might be able to explain why this is happening?

Here is a JSFiddle

.btn {
      position: relative;
      font-size: 40px;
    }

    .btn::before {
      content: '';
      height: 1px;
      width: 100%;
      background-color: red;
      position: absolute;
      bottom: -1px;
      right: 0;
      -webkit-transition: all 0.5s linear;
      -moz-transition: all 0.5s linear;
      -ms-transition: all 0.5s linear;
      transition: all 0.5s linear;
    }

    .btn::after {
      content: '';
      height: 1px;
      width: 0;
      background-color: blue;
      position: absolute;
      bottom: -1px;
      left: 0;
      -webkit-transition: all 0.5s linear;
      -moz-transition: all 0.5s linear;
      -ms-transition: all 0.5s linear;
      transition: all 0.5s linear;
      -webkit-transition-delay: 0.5s;
      -moz-transition-delay: 0.5s;
      -ms-transition-delay: 0.5s;
      transition-delay: 0.5s;
    }

    .btn:hover::before {
      width: 0;
    }
    .btn:hover::after {
      width: 100%;
    }
<a class="btn">Button</a>

css html
1 Answers

With the help of @somethinghere, I was able to resolve this myself. For anyone who might need this in the future, the reverse animation was too slow so was incomplete before hovering over the element again. Adding a transition of 0 for the reverse animation solved the problem.

jsFiddle

.btn {
      position: relative;
      font-size: 40px;
    }

    .btn::before {
      content: '';
      height: 1px;
      width: 100%;
      background-color: red;
      position: absolute;
      bottom: -1px;
      right: 0;
      -webkit-transition: all 0s ease-in-out;
      -moz-transition: all 0s ease-in-out;
      -ms-transition: all 0s ease-in-out;
      transition: all 0s ease-in-out;
    }

    .btn::after {
      content: '';
      height: 1px;
      width: 0;
      background-color: red;
      position: absolute;
      bottom: -1px;
      left: 0;
      -webkit-transition: all 0s ease-in-out;
      -moz-transition: all 0s ease-in-out;
      -ms-transition: all 0s ease-in-out;
      transition: all 0s linear;
    }

    .btn:hover::before {
      width: 0;
      -webkit-transition: all 0.4s ease-in-out;
      -moz-transition: all 0.4s ease-in-out;
      -ms-transition: all 0.4s ease-in-out;
      transition: all 0.4s linear;
    }
    .btn:hover::after {
      width: 100%;
      -webkit-transition: all 0.4s ease-in-out;
      -moz-transition: all 0.4s ease-in-out;
      -ms-transition: all 0.4s ease-in-out;
      transition: all 0.4s linear;
      -webkit-transition-delay: 0.4s;
      -moz-transition-delay: 0.4s;
      -ms-transition-delay: 0.4s;
      transition-delay: 0.4s;
    }
<a class="btn">Button</a>

user_24988900
Related