CSS text width going from left to right

Question

CSS text width going from left to right

I am attempting to create a text fade effect from left to right, inspired by the technique discussed in this answer. However, I would like the text to be concealed behind a transparent background div instead of the white background used in the example. Is this achievable with CSS? My rationale is that there will be an image behind the text that I want to gradually reveal.

jquery css fade

Answer 1

Answer №1

If you want to create a simple animation, just adjust the width property from 0 to 100% in the @keyframes rule (similar to the example provided in your question) to reveal different parts of the text.

Here's a quick demo for you to see it in action. 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.

This JavaScript code is just for testing purposes. You can achieve the same effect using only @keyframes.

Answer 2

If you want to create a simple animation, just adjust the width property from 0 to 100% in the @keyframes rule (similar to the example provided in your question) to reveal different parts of the text.

Here's a quick demo for you to see it in action. 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.

This JavaScript code is just for testing purposes. You can achieve the same effect using only @keyframes.

CSS text width going from left to right

Answer №1

Similar questions

Preventing jQuery plugin from overriding default settings

Make the inner div within the td stretch to cover the entire height of the td

unable to receive input value

Tips for extracting information from a JSON file using $routeParams in AngularJS

Create a custom jQuery plugin that enables users to toggle checkboxes with the click of a button

What is causing my DropDown List filter to reset when using Pagination?

Utilize AJAX to fetch and display the response from a Node JS route directly onto an HTML page

What is the best way to input an HTML element into AngularJS code?

Generating a JSON data set with two separate pieces of data, not contained within a dictionary

When viewing Google maps in full screen mode, the image suddenly vanishes

Issue with CSS transition bug in Offcanvas on Android version 4.1.x

Troubleshooting: Css navbar alignment

Ways to showcase INPUT TYPE when making a Selection?

Acquiring the index of a selector event within a list of dynamic elements

Ways to initiate a flip motion

Updating the logo image on mobile devices using responsive CSS styling

Ways to retrieve the content of a text box within a cell

WP Ajax failing to work in the else statement

Trouble encountered while refreshing a <div> element using AJAX functionality

Using jQuery, you can enclose a string of text with HTML tags easily