Animate Text Fill from Left to Right

Text colour fill from left to right using CSS

add an outer div add mix-blend-mode: multiply; when :hover

.popUpWord {  text-transform: uppercase;  font: bold 26vmax/.8 Open Sans, Impact;  background: black;  display: table;  color: white;}
.outPop:hover {  margin: auto;  background: linear-gradient( crimson , crimson) white no-repeat 0 0;  background-size: 0 100%;  animation: stripes 2s linear 1 forwards;}.outPop:hover .popUpWord{  mix-blend-mode: multiply;}
@keyframes stripes {  to {    background-size:100% 100%;  }}
body {  float:left;  height: 100%;  background: black;}

<div class="outPop"><div class="popUpWord">  Text</div></div>

Animate text fill from left to right

you may also take a look at flex (for centering things) and mix-blend-mode, so it can be avalaible also for Firefox:

.box-with-text {  text-transform: uppercase;  font: bold 26vmax/.8 Open Sans, Impact;  background: black;  display: table;  color: white;  mix-blend-mode: multiply}
@-webkit-keyframes stripes {  to {    background-size:100% 100%;  }}
@keyframes stripes {  to {    background-size:100% 100%;  }}
html {  display: -webkit-box;  display: -webkit-flex;  display: -ms-flexbox;  display: flex;  -webkit-box-align:center;  -webkit-align-items:center;      -ms-flex-align:center;          align-items:center;  height: 100%;  background: black;}
body {  margin: auto;  background: -webkit-linear-gradient( crimson , crimson) turquoise no-repeat 0 0;  background: linear-gradient( crimson , crimson) turquoise no-repeat 0 0;  background-size: 0 100%;  -webkit-animation: stripes 2s linear infinite;          animation: stripes 2s linear infinite;}

<div class="box-with-text">  Text</div>

How can I animate my text to highlight from left to right?

I found a solution inspired by this article :

@keyframes highlight {
    from {
      background-position: 0;
    }

    to {
      background-position: -100%;
    }
}

h2 {
    animation-name: highlight;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
    background-size: 200%;
    background-image: linear-gradient(to right, white 50%, transparent 50%), 
                      linear-gradient(transparent 50%, purple 50%);
}

<h2>Here is an example text that will have the highlight</h2>

Issue with text filling, CSS Animation

The problem lies in the way you handle text in your animation.

You are animating a string of text appearing slowly but don't account for any of the inherit string properties such as line breaking.
During your animation, the first word: "COMING", appears normally as the width increases, but once the hyphen appears, HTML thinks you have inserted a word break point and tries to break "SOON" to a new line.

This can be solved by adding white-space: nowrap; to your ::before section, to prevent it from breaking as the animation plays out.

HTML

<div class="comingsoon-loading">
  <h1 data-text="COMING-SOON">COMING-SOON</h1>
</div>

CSS

.comingsoon-loading {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: blue;
}

.comingsoon-loading h1 {
  position: absolute;
  font-size: 20vh;
  color: #ffcc00;
  -webkit-text-stroke: 2px black;
  text-transform: uppercase;
}

.comingsoon-loading h1::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  color: black;
  -webkit-text-stroke: 0px black;
  border-right: 2px solid black;
  overflow: hidden;
  animation: animate 5s linear infinite;
  white-space: nowrap;
}

/* animation to fill text */

@keyframes animate {
  0%,
  10%,
  100% {
    width: 0;
  }
  50%,
  70% {
    width: 100%;
  }
}

Fill text color animation while on hover, with animated colors

You can consider a background animation and you can easily achieve this. The idea is to use background-color for text coloration then have another background layer that will show/reveal this coloration on hover:

:root {  --txt-color: #fff;  --txt-box-bg: #424242;  --main-bg: #000;  /* front page title text */  --main-front-color: #00a8ff;  --second-front-color: #e84118;  --third-front-color: #fbc531;}
* {  margin: 0px;  padding: 0px;}

/* Text */
.head-text {  font-family: "IBM Plex Sans", sans-serif;  color: var(--txt-color);}
.main-text {  font-family: "IBM Plex Mono" monospace;  color: var(--txt-color);}

/* Allgin */
.center {  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}

/* classes */
.front-page {  background-color: var(--main-bg);  color: #000;}
.full-page {  background-size: cover;  height: 100vh;}

/* IDs */
#title-text {  position: absolute;  /*Color the text with background*/  background-clip: text;  color: transparent;  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  /**/  /*The animated layer*/  background-image:linear-gradient(#000,#000);  background-size:100% 100%;  background-position:right;  background-repeat:no-repeat;  /**/  transition:1s all;  font-weight: bold;  text-align: center;  font-size: 90px;  -webkit-text-stroke: 2px var(--main-front-color);  animation: stroke-rainbow 13s linear infinite,             text-rainbow 13s linear infinite;}
#title-text:hover {  background-size:0% 100%;}
@keyframes stroke-rainbow {  0% {    border-color: var(--main-front-color);    -webkit-text-stroke-color: var(--main-front-color);  }  25% {    border-color: var(--second-front-color);    -webkit-text-stroke-color: var(--second-front-color);  }  50% {    border-color: var(--third-front-color);    -webkit-text-stroke-color: var(--third-front-color);  }  75% {    border-color: var(--second-front-color);    -webkit-text-stroke-color: var(--second-front-color);  }  100% {    border-color: var(--main-front-color);    -webkit-text-stroke-color: var(--main-front-color);  }}
@keyframes text-rainbow {  0% {    background-color: var(--main-front-color);  }  25% {    background-color: var(--second-front-color);  }  50% {    background-color: var(--third-front-color);  }  75% {    background-color: var(--second-front-color);  }  100% {    background-color: var(--main-front-color);  }}

<div class="front-page full-page">  <span id="title-text" class="center head-text">Hi</span></div>

Animate text to change color from top to bottom

I figured out how to accomplish, so I'm answering my own question.

let titleIDThe = document.getElementById("titleIDThe");
titleIDThe.classList.add("animateColor");

.animateColor {
  animation: changeColor infinite;
  animation-timing-function: ease-out;
  animation-duration: 10s;
  background-image: linear-gradient(to bottom, red 50%, #2E7D32 50%);
  background-position: 0% 0%;
  background-size: 100% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  width: 50vw;
  height: 50vh;
  font-size: 30px;
}

@keyframes changeColor {
  0% {
    background-position: 0% 0%;
  }
  20% {
    background-position: 0% -100%;
  }
  30% {
    background-position: 0% -100%;
  }
  50% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 0% 0%;
  }
}

<span id="titleIDThe">The</span>

---

Related Topics