如何用CSS动画实现按钮悬停效果并复刻到预加载器

I see where the right-side glitch is coming from, and we can streamline your implementation while keeping that smooth slide effect from your original button. Let’s break this down:

What Caused the Glitch #

In your @keyframes fontbulger, you set left: unset and right: 0 at the 60% mark. This disrupts the pseudo-element’s base positioning (originally set to left: 0), creating that odd right-side artifact when the animation scales back down. We don’t need to adjust the element’s position—only the transform origin and scale values.

Fixed & Optimized Code #

Here’s the cleaned-up version that fixes the glitch and simplifies the animation logic:

HTML

<a href="#" class="btnslide">
  <span class="text">View Our Projects</span>
</a>

CSS

* { margin: 0; padding: 0; }

.btnslide {
  width: 100%;
  font-size: 14px;
  background-color: #fff;
  color: #2A4173;
  display: inline-block;
  text-align: center;
  position: fixed;
  outline: none;
  border-radius: 0;
  top: 0;
  left: 0;
  height: 100vh;
}

.btnslide span.text {
  transition: color 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  position: relative;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  display: block;
}

.btnslide span.text img {
  max-height: 150px;
}

.btnslide:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #2A4173;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform;
  /* Auto-playing preloader animation */
  animation: slideAnimation 5s infinite;
}

/* Hover behavior override */
.btnslide:hover:before {
  animation: none; /* Pause auto-animation on hover */
  transform: scaleX(1);
  transform-origin: left;
}

.btnslide:hover span.text {
  color: #fff;
}

@keyframes slideAnimation {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  30% {
    transform: scaleX(1);
    transform-origin: left;
  }
  31% {
    /* Switch origin right after full scale for clean transition */
    transform-origin: right;
  }
  60% {
    transform: scaleX(1);
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

Key Improvements: #

1. Glitch Fix: Removed all position adjustments (left: unset, right: 0) from keyframes. The pseudo-element stays anchored to left: 0 at all times, eliminating the right-side artifact.
2. Simpler Animation: We only toggle transform-origin at the exact moment the animation reaches full scale (31% mark), ensuring a seamless transition from sliding in to sliding out.
3. Hover Compatibility: Added animation: none to the hover state so the auto-playing preloader pauses when users interact with the button, falling back to your original button’s hover behavior.
4. Consistent Easing: Kept the same cubic-bezier(0.19, 1, 0.22, 1) curve from your original button for a polished, smooth feel.

Even Simpler Alternative (No Hover Needed) #

If the preloader only needs to auto-play the slide effect without responding to hover, you can remove the .btnslide:hover blocks entirely. The core animation logic remains intact and works independently.

内容的提问来源于stack exchange，提问作者MrJoshFisher