1

I'm trying to fade in text from left to right similar to answer found here, but want the text to be hidden behind a transparent background div instead of the example's white background. Is this possible with CSS? Reason being there will be a image behind the text that I'd like to fade in.

sternmd
  • 635
  • 2
  • 8
  • 15

1 Answers1

2

Yes, you can simple make it by setup the width from 0 to 100% on @keyframes (as in example in your question) to show the parts of the text.

Small demo-example for you to show is how it work. Click on Zero:

stripe.onclick = function() {
  var sec = new Date().getSeconds() % 10;
  stripe.classList.add('animate');
  digit.classList.add('animate');
  console.log();
};
 #digit {
   width: 20px;
   overflow: hidden;
   font: 32px "Courier New", monospace;
   cursor: pointer;
   transition: 2s linear width;
 }

 #stripe {
   width: 20px;
   transition: 2s linear width;  
 }

 #stripe.animate {
   width: 200px;
   transition: 2s linear width;
 }

 #digit.animate {
   width: 200px;
   transition: 2s linear width;
 }
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Title</title>
  <style>
  </style>
</head>
<body>
 
  <div id="digit"><span id="stripe">0123456789</span></div>

<script>
</script>
</body>
</html>

P.S.

JS only for test. By @keyframes you do not need them.

Sviat Kuzhelev
  • 1,758
  • 10
  • 28
  • 1
    Thank you this works great! Note if `#stripe` text has spaces use `white-space: no-wrap` to prevent the words from wrapping to the next line. – sternmd Feb 14 '18 at 22:12