文本的变换来源

Question

我目前正在尝试同时更改背景和文本颜色，从左到右。就像背景正在这样做一样。
但是，由于变换来源在文本中不起作用，所以我想知道如何(如果可能的话(实现这一目标？

这是我可以做的演示：

.container {
  background-color: gray;
  height: 200px;
  width: 50vw;
  margin: 5vw;
  opacity: 0.5;
  border-left: 5px solid black;
  position: relative;
  -webkit-transition: 0.5s all ease;
  transition: 0.5s all ease;
  -webkit-transform-origin: left;
          transform-origin: left;
}
.container:hover {
  color: white;
}
.container:hover::after {
  width: 100%;
  content: '';
}
.container::after {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  opacity: 0.5;
  background-color: darkgreen;
}
.container .text {
  display: block;
  text-align: center;
  font-size: 2.3em;
  font-family: 'Roboto';
  line-height: 2.5em;
}

<div class="container">
<div class="text">Change Text at the same time</div>
</div>

Answer 1

我通过将以下属性添加到 .text：

来实现效果

  background: linear-gradient(to left, black 0%, black 50%, white 50%, white 100%); // half black and half white background
  background-clip: text; // clip the background in the shape of the text
  color: transparent; // remove the color of the text
  background-size: 200%; // double the size of the background
  background-position: 100% 0; // move the background to show just the black color

现在要使色彩变化效果 - 将背景位置移至0％以显示白色：

.container:hover .text {
  background-position: 0;
}

演示

.container {
  background-color: gray;
  height: 200px;
  width: 50vw;
  margin: 5vw;
  opacity: 0.5;
  border-left: 5px solid black;
  position: relative;
  -webkit-transition: 0.5s all ease;
  transition: 0.5s all ease;
  transform-origin: left;
}
.container:hover .text {
  background-position: 0;
}
.container:hover::after {
  width: 100%;
  content: '';
}
.container::after {
  transition: all 1s ease;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  opacity: 0.5;
  background-color: darkgreen;
}
.container .text {
  transition: all 1s ease;
  display: block;
  text-align: center;
  font-size: 2.3em;
  font-family: 'Roboto';
  line-height: 2.5em;
  background: linear-gradient(to left, black 0%, black 50%, white 50%, white 100%);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200%;
  background-position: 100% 0;
}

<div class="container">
  <div class="text">Change Text at the same time</div>
</div>

浏览器支持：

由Firefox，Chrome和其他Webkit浏览器支持。IE和Edge不支持，因为它们不支持background-clip: text;