Transform Origin for text? - css

Question

I'm currently trying to change both my background and my text color at the same time, from left to right. Like the background is doing it.
But, since transform origin does not work in text, I would like to know how (if possible) can I achieve this?
Here is a demo of what I could do:
.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

I achieved the effect by adding the following properties to .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
Now to make the color change effect - move the background position to 0% to show the white color:
.container:hover .text {
background-position: 0;
}
Demo
.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>
Browsers support:
Supported by Firefox, Chrome, and other webkit browsers.
Not supported by IE and Edge, as they don't support background-clip: text;