Text reveal using CSS animation and background color

Question

I'm trying to do a text reveal CSS animation like this one. Using ::before and ::after seems like an overly complicated approach so I'm trying to do this using a linear-gradient background color, background position, or something else that could be simpler.

:root {
  --primary-rgba: rgba(17,184,106,1);
  --secondary-rgba: rgba(255,255,255,1);
}

@keyframes slidein {
  0% {
    background: transparent;
  }
  25% {
    background: linear-gradient(90deg, var(--secondary-rgba) 0%, var(--secondary-rgba) 50%, var(--primary-rgba) 50% var(--primary-rgba) 100%); 
  }
  50% {
    background: var(--secondary-hex);
  }
  75% {
    background: linear-gradient(90deg, var(--primary-rgba) 0%, var(--primary-rgba) 50%, var(--secondary-rgba) 50% var(--secondary-rgba) 100%); 
  }
  100%   {
    background: transparent;
  }
}

I even wondered if adding more frames to the animation would make it work the way I wanted to and tried hacking in a bunch of (repetative) frames. Still no luck.

After finding out that CSS transitions likely don't support gradients yet, I tried using background position to reveal text but with no success.

Are either of these approaches doable?

Please post the relevant [mcve] code in your question, including the applicable HTML; because my browsers - Chromium and Firefox - aren't playing nice with Codepen because of referrer headers, apparently, I have no idea what's happening in the demo you link to in your first link. — David Thomas, Aug 03 '19 at 15:33
background are painted behind text so even you find a way to animate background you cannot do it like you want. You will need an extra element — Temani Afif, Aug 03 '19 at 15:37
here is how you can do it with background but you will need at least one pseudo element: https://stackoverflow.com/a/53196294/8620333 — Temani Afif, Aug 03 '19 at 16:02
@TemaniAfif ya you're right, just thinking about it more, I can't do a "reveal" with a background. Go ahead and convert your comments to an answer and I'll accept that. — Brady Dowling, Aug 03 '19 at 16:38

Temani Afif · Accepted Answer · 2019-08-29T22:11:00.683

The only way to create a reveal using background is to consider multiple background layer where one of them is using background-clip:text which will allow you to also color the text using background and control its position.

Here is an example based on a previous answer. The trick is to have two layers that we animate the same then at the end we animate the top one to make its width 0 while keeping the other (text layer) at width 100%

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #8ce2ea;
  margin:0;
}

.reveal-text {
  position: relative;
  font-size: 50px;
  color: transparent;
  background-image: 
    linear-gradient(#f2f98b, #f2f98b), 
    linear-gradient(#fff,#fff);
  -webkit-background-clip:
    padding-box,
    text;
  background-clip:
    padding-box,
    text;
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: left;
  animation: revealer-text 0.8s 1s forwards;
}

@keyframes revealer-text {
  0% {
    background-size: 0% 100%;
  }
  50% {
    background-size: 100% 100%;
    background-position: left;
  }
  51% {
    background-size: 100% 100%;
    background-position: right;
  }
  100% {
    background-size: 0% 100%,100% 100%;
    background-position: right;
  }
}

<h1 class="reveal-text">
  I'm here.
</h1>

This may not work in all the browser so if you want a more supported way using background you will need at least an extra element like I did here Clip-path alternatives for reveal text

@A.Meshu Oh yes, It's working for me too, they fixed the bug I guess. — Temani Afif, Aug 03 '19 at 19:44
If you got second, care to look here: https://stackoverflow.com/questions/57296879/overflow-scrolling-on-dynamically-moving-elements — A. Meshu, Aug 03 '19 at 19:45
@A.Meshu you can find your answer here: https://stackoverflow.com/q/47372148/8620333 ... this overflow is bydesign and one solution is to change the direction — Temani Afif, Aug 03 '19 at 19:53

Text reveal using CSS animation and background color

1 Answers1