按钮的悬停效果:从左滑入，从左滑出

Question

我想在按钮上创建这个悬停效果：

悬停时，背景颜色会从左侧滑入。如果鼠标离开按钮，原来的背景颜色应该会返回，但会从左侧滑入。

现在我有以下代码(两个类都适用于按钮)：

.button_slide {
  color: #FFF;
  border: 2px solid rgb(216, 2, 134);
  border-radius: 0px;
  padding: 18px 36px;
  display: inline-block;
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #D80286;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}

.slide_right:hover {
  box-shadow: inset 400px 0 0 0 #D80286;
}

我想让悬停背景在离开按钮时从左侧消失。现在它从右边消失了。

有人能帮我吗？

Answer 1

你试过使用@keyframes吗？下面是一个例子。

我添加了0.01px的展开，because otherwise the animation is flickering。我把大小改成em，这样就可以毫无问题地改变大小了。

下次请附上你的HTML！

​

.button_slide {
    border: 2px solid rgb(216, 2, 134);
    padding: 1.28571em 2.57143em;
    display: inline-block;
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 20px;
    letter-spacing: 1px;
    cursor: pointer;
    color: #d80286;
  animation: leave 0.4s forwards;
}

.slide_right:hover {
    animation: hover 0.4s forwards;
}

@keyframes hover {
    from {
        box-shadow: inset 0 0 0 0.01px #d80286;
    }
    to {
        box-shadow: inset 8.79928em 0 0 0.01px #d80286;
        color: #fff;
    }
}

@keyframes leave {
    from {
        box-shadow: inset -8.79928em 0 0 0.01px #d80286;
        color: #fff;
    }
    to {
        box-shadow: inset 0 0 0 0.01px #d80286;
    }
}

<button class="button_slide slide_right">
    Hello
</button>

​