0

I got the problem, that if I remove the "background-color" of ".box-with-text" the text-fill doesn't work.

.box-with-text {
  text-transform: uppercase;
  font: bold 6rem Open Sans, Impact;
  background: black;
  color: white;
  mix-blend-mode: multiply;
}

@keyframes stripes {
  to {
    background-size:100% 100%;
  }
}
.wrapper {
  max-width: 300px;
  margin: 0 auto;
}
.container {
  display: flex;
  background: linear-gradient( crimson , crimson) white no-repeat 0 0;
  background-size: 0 100%;
  animation: stripes 5s;
  animation-fill-mode: forwards;
  text-align: center;
}

Codepen

Rubocop
  • 13
  • 1
  • 1
  • 6
  • What do you mean "doesn't work"? If I remove the background colour it looks like it works fine but since it makes the foreground and background colour the same, I don't see the text. – Godwin Jun 21 '16 at 21:15
  • @Godwin I don't know what to do, that i can see the text with a transparent background – Rubocop Jun 21 '16 at 21:22
  • Possible duplicate of [fill animation using CSS or Javascript](http://stackoverflow.com/questions/17745983/fill-animation-using-css-or-javascript) – Godwin Jun 21 '16 at 23:04

1 Answers1

0

I'm guessing at what you mean by "doesn't work" here and assuming that what you are looking for is to have white text on a white background that gets filled in red by the animation (please expand on your question to explain this is this is not what you're trying to do).

You will need to use a different blend mode to achieve this effect, you can get this by making the foreground black and the background white and using the screen blend mode:

.box-with-text {
    text-transform: uppercase;
    font: bold 6rem Open Sans, Impact;
    background: white;
    color: black;
    mix-blend-mode: screen;
}

See: http://codepen.io/Godwin/pen/oLYYvr?editors=1100

Godwin
  • 9,739
  • 6
  • 40
  • 58
  • I just want to see text with no background-color in "box-with-text" seems to me like mix-blend-mode always needs a background – Rubocop Jun 21 '16 at 21:52
  • It sounds as though there are better ways to achieve this effect. Have you tried setting `overflow:hidden` and expanding the width from 0 to 100%? – Godwin Jun 21 '16 at 22:16
  • no, not yet, sounds good. I'm gonna try it Could you help me width a code example? – Rubocop Jun 21 '16 at 22:38
  • See what you can achieve using `overflow:hidden` and setting a width first, then ask another question on that if you run into problems. If you want some help, there's a very similar question here: http://stackoverflow.com/questions/17745983/ – Godwin Jun 21 '16 at 23:06