这里你需要做的是使用一个线性渐变作为背景，并对背景位置进行动画处理。在代码中：
使用线性渐变（50%红色，50%蓝色）并告诉浏览器背景是元素宽度的2倍（宽度：200%，高度：100%），然后告诉它将背景放置在右边。

background: linear-gradient(to left, red 50%, blue 50%) right;
background-size: 200% 100%;

字符串
悬停时，将背景位置更改为left，使用transition:all 2s ease;，位置将逐渐变化（使用linear坚韧更好）

background-position: left;

型
http://jsfiddle.net/75Umu/3/
至于 *-vendor-prefix的“”，请参阅对您的问题的评论

• extra*：

如果你想在颜色中有一个“过渡”，你可以使它的宽度为300%，过渡开始于34%（略大于1/3），结束于65%（略小于2/3）。

background: linear-gradient(to left, red 34%, blue 65%) right;
background-size: 300% 100%;

型

Demo：

div {
    font: 22px Arial;
    display: inline-block;
    padding: 1em 2em;
    text-align: center;
    color: white;
    background: red; /* default color */

    /* "to left" / "to right" - affects initial color */
    background: linear-gradient(to left, salmon 50%, lightblue 50%) right;
    background-size: 200%;
    transition: .5s ease-out;
}
div:hover {
    background-position: left;
}

<div>Hover me</div>

的字符串

hover上的一个css代码就可以做到这一点：box-shadow: inset 100px 0 0 0 #e0e0e0;
一个完整的演示可以在我的小提琴中找到：
https://jsfiddle.net/shuvamallick/3o0h5oka/

如果你像我一样，需要改变文本本身的颜色，同时填充背景颜色，请检查我的解决方案。
创建步骤：
1.有两个文本，一个是静态颜色的颜色悬停，另一个在默认状态的颜色，你将移动悬停
1.在悬停时，移动非静态文本的 Package ，同时将该 Package 的内部文本向相反方向移动。
1.确保在需要的地方添加溢出隐藏
这个解决方案的好处是：

• 支持IE9，仅使用transform
• 按钮（或您正在应用动画的元素）的宽度是可变的，因此这里没有使用固定值

这个解决方案不太好：

• 一个非常混乱的标记，可以通过使用伪元素和att（数据）来解决吗？
• 有一些小故障动画时，有多个然后一个按钮旁边的对方，也许它可以很容易地解决，但我没有花太多的时间来调查。

检查笔-> https://codepen.io/nikolamitic/pen/vpNoNq

<button class="btn btn--animation-from-right">
  <span class="btn__text-static">Cover left</span>
  <div class="btn__text-dynamic">
    <span class="btn__text-dynamic-inner">Cover left</span>
  </div>
</button>

.btn {
  padding: 10px 20px;
  position: relative;

  border: 2px solid #222;
  color: #fff;
  background-color: #222;
  position: relative;

  overflow: hidden;
  cursor: pointer;

  text-transform: uppercase;
  font-family: monospace;
  letter-spacing: -1px;

  [class^="btn__text"] {
    font-size: 24px;
  }

  .btn__text-dynamic,
  .btn__text-dynamic-inner {    
    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 2;

    transition: all ease 0.5s;
  }

  .btn__text-dynamic {
    background-color: #fff;
    color: #222;

    overflow: hidden;
  }

  &:hover {
    .btn__text-dynamic {
      transform: translateX(-100%);
    }
    .btn__text-dynamic-inner {
      transform: translateX(100%);
    }
  }
}

.btn--animation-from-right {
    &:hover {
    .btn__text-dynamic {
      transform: translateX(100%);
    }
    .btn__text-dynamic-inner {
      transform: translateX(-100%);
    }
  }
}

字符串
如果要向左设置动画，可以删除.btn--animation-from-right修饰符。

div {
    font: 22px Arial;
    display: inline-block;
    padding: 1em 2em;
    text-align: center;
    color: white;
    background: red; /* default color */

    /* "to left" / "to right" - affects initial color */
    background: linear-gradient(to left, salmon 50%, lightblue 50%) right;
    background-size: 200%;
    transition: .5s ease-out;
}
div:hover {
    background-position: left;
}

个字符