CSS animation for hover effect flickers, not properly showing in FF

Question

thanks for reading and offering help.

I assume my CSS code shouldn't be too complicated, however, it does not behave the way I want.

Expected result: when hovering over the button, there is a background area "folding up" (no background color to dark background color).

Actual results:

• Works in Chrome (Version 88.0.4324.146), however, there is a flicker to it, like it is rebuilding again and again. This happens especially when hovering coming from the top. Looks alright when doing it from the bottom and rather slow.
• I also saw that it seems to not really work in FF (Dev Edition 86.0b9). Sometimes it pops up, but if it does, it only does so once. Refreshing the browser window is not helping either.

I already tried to have a <div> around it and apply the hover animation to it, to fix it with prefixes... so far I couldn't make it work (smoothly), the issue always persisted.

So, this is the code now, which can also be found in this codepen example

html:

  <button class="btn">
    click
  </button>

CSS:

.btn {
  height: 48px;
  width: 200px;
  text-align: center;
  text-transform: uppercase;

  border: none;
  border-bottom: 1px solid steelblue;
  position: relative;
  color: steelblue;
  background: transparent;

  ::before {
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    z-index: -1;
  }

  &:hover,
  &:focus {
    animation: one 0.25s linear;
    background-color: steelblue;
    color: whitesmoke;
    opacity: 1;
    transform-origin: 50% 100%;
  }

  @keyframes one {
    0% {
      transform: perspective(1000px) rotateX(90deg);
    }
    100% {
      transform: perspective(1000px) rotateX(0);
    }
  }
}

If this is a duplicate, it means I didn't find the helping answer yet, will be happy for any solutions and hints.

Answer 1

The problem also happens in Chrome. It happens because you are changing the perspective of the button, which will change its "bounding box".

So when you mouse over the bounding box the animation will change the bounding box, and then the mouse is not over the bounding box, so the animation stops, but then the mouse is over the bounding box again, so the animation starts, and so on.

To fix this, create a container around the button, and make the countainer change the button perspective, instead of the button changing the perspective itself. The container will retain its bounding box when yo do this:

.bcg {
  display: flex;
  justify-content: center;
  align-items: center;
  background: whitesmoke;
  height: 100vh;
}
.btncontainer {
  display: inline-block;
}
.btncontainer:hover .btn, .btncontainer:focus .btn {
  animation: one 0.25s linear;
  background-color: steelblue;
  color: whitesmoke;
  opacity: 1;
  transform-origin: 50% 100%;
}

@keyframes one {
  0% {
    transform: perspective(1000px) rotateX(90deg);
  }
  100% {
    transform: perspective(1000px) rotateX(0);
  }
}

.btn {
  height: 48px;
  width: 200px;
  text-align: center;
  text-transform: uppercase;

  border: none;
  border-bottom: 1px solid steelblue;
  position: relative;
  color: steelblue;
  background: transparent;
}
.btn::before {
  bottom: 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  z-index: -1;
}

<div class="bcg">
  <div class="btncontainer">
    <button class="btn">
      click
    </button>
  </div>
</div>