Is it possible for a gradient to maintain the original width of the element to which it is added?

Is there a way to create a gradient that remains static and masks out certain visible parts?

I want the countdown timer to darken as it nears the end. Currently, my gradient only reduces colors in between while keeping the left and right colors:

(function() {
  function resetCountdown() {
    window.requestAnimationFrame(function() {
      document.getElementById("countdown-evolution").classList.remove("countdown-reset");
      window.requestAnimationFrame(function() {
        document.getElementById("countdown-evolution").classList.add("countdown-reset");
      });
    });
  }
  resetCountdown();
  document.getElementById("countdown-evolution").addEventListener("transitionend", resetCountdown);
})();
/* Background */

#countdown-background {
  height: 50px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ebebeb;
  background-color: #ffffff;
}


/* Fill */

#countdown-evolution {
  height: 100%;
  width: 100%;
  transform-origin: left;
  background: linear-gradient(to right, #6419cd, #3273fa);
}
  
/* Reset */

.countdown-reset {
  transition: transform 15s linear;
  transform: scaleX(0);
}


/* Reference */

.fixed-background {
  height: 50px;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(to right, #6419cd, #3273fa);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <title>Countdown</title>
</head>
 
<body>
  <div id="countdown-background>
    <div id="countdown-evolution></div>
  </div>
  <div class="fixed-background></div>
</body>

</html>

I have tried making countdown-background a gradient and countdown-evolution a solid color for the desired effect. However, this caused more issues than solutions as it changed the appearance of my countdown timer:

(function() {
  function resetCountdown() {
    window.requestAnimationFrame(function() {
      document.getElementById("countdown-evolution").classList.remove("countdown-reset");
      window.requestAnimationFrame(function() {
        document.getElementById("countdown-evolution").classList.add("countdown-reset");
      });
    });
  }
  resetCountdown();
  document.getElementById("countdown-evolution").addEventListener("transitionend", resetCountdown);
})();
/* Background */

#countdown-background {
  height: 50px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ebebeb;
  background: linear-gradient(to right, #6419cd, #3273fa);
}


/* Fill */

#countdown-evolution {
  height: 100%;
  width: 100%;
  transform-origin: left;
  background-color: #ffffff;
}


/* Reset */

.countdown-reset {
  transition: transform 15s linear;
  transform: scaleX(0);
}


/* Reference */

.fixed-background {
  height: 50px;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(to right, #6419cd, #3273fa);
}
<!DOCTYPE html>
<html lang="en>

<head>
  <meta charset="UTF-8>
  <title>Countdown</title>
</head>

<body>
  <div id="countdown-background>
    <div id="countdown-evolution></div>
  </div>
  <div class="fixed-background></div>
</body>

</html>×

I welcome any advice on achieving the desired outcome. Thank you.

javascripthtmlcss

Answer №1

Implement a creative solution using an alternate element for animation effects:

document
.querySelector("#countdown-evolution-curtain")
.addEventListener('animationend', () => {
  console.log('Animation ended');
});
/* Styling */

#countdown-background {
  height: 50px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ebebeb;
  background-color: #ffffff;
  position: relative;
}

#countdown-background div {
  position: absolute;
  right: 0;
  top: 0;
}


/* Animation */

#countdown-evolution-curtain {
  background: #fff;
  height: 100%;
  width: 0%;
  animation: reveal 10s linear;
}

#countdown-evolution {
  height: 100%;
  width: 100%;
  background: linear-gradient(to right, #6419cd, #3273fa);
}

@keyframes reveal {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
<div id="countdown-background">
  <div id="countdown-evolution"></div>
  <div id="countdown-evolution-curtain"></div>
</div>

Answer №2

Here are five unique methods to achieve a desired effect using only one element:

  1. Adding an additional white layer above with a different gradient
  2. Specifying fixed values for the gradient color stops
  3. Utilizing background-clip to clip the background in the content area by animating the padding
  4. Incorporating a mask layer
  5. Employing a pseudo-element as an extra layer

/* Reference */
.reference {
  height: 50px;
  border: 1px solid #ebebeb;
  background: linear-gradient(to right, #6419cd, #3273fa);
}

/* (1) */
.first {
  background:
    linear-gradient(#fff,#fff) right no-repeat,
    linear-gradient(to right, #6419cd, #3273fa);
  animation:first 5s linear forwards;
} 
@keyframes first{
  from {
    background-size:0% 100%,auto;
  }
  to {
    background-size:100% 100%,auto;
  }
}
/* (2) */
.second {
  background:linear-gradient(to right, #6419cd 0, #3273fa 100vw) left no-repeat;
  animation:second 5s linear forwards;
} 
@keyframes second{
  from {
    background-size:100% 100%;
  }
  to {
    background-size:0% 100%;
  }
}

/* (3) */
.third {
  background-clip:content-box;
  animation:third 5s linear forwards;
} 
@keyframes third{
  from {
    padding-right:0%;
  }
  to {
    padding-right:100%;
  }
}
/* (4) */
.fourth {
  -webkit-mask:linear-gradient(#fff,#fff) left no-repeat;
          mask:linear-gradient(#fff,#fff) left no-repeat;
  animation:fourth 5s linear forwards;
} 
@keyframes fourth{
  from {
    -webkit-mask-size:100% 100%;
            mask-size:100% 100%;
  }
  to {
    -webkit-mask-size:0% 100%;
            mask-size:0% 100%;
  }
}
/* (5) */
.fifth{
  position:relative;
} 
.fifth::before {
  content:"";
  position:absolute;
  background:#fff;
  top:0;
  right:0;
  bottom:0;
  animation:fifth 5s linear forwards;
}
@keyframes fifth{
  from {
    left:100%;
  }
  to {
    left:0%;
  }
}
<div class="first reference"></div>
<div class="second reference"></div>
<div class="third reference"></div>
<div class="fourth reference"></div>
<div class="fifth reference"></div>

<div class="reference"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Embracing the Quirks of JSON: A Call for a

Currently, I am in the process of developing a webpage that involves incorporating four distinct JSON entities (objects, arrays). Excuse my lack of appropriate jargon. Upon receiving the JSON data, it is structured as an object with numerous sub-objects, ...

javascriptjson

How can you hide specific elements in HTML/CSS based on window size without relying on media queries?

How can I create an HTML/CSS toolbar where specific elements disappear completely when the browser size is decreased, similar to how the favorites bar functions in most browsers? The toolbar should be able to display a varying number of items. In this cas ...

htmlcssfrontend

Wait until the user submits the form before activating Angular validations, and do not display any validation messages if the user deletes text from a text box

I am looking to implement angular validations that are only triggered after the user clicks on submit. I want the validations to remain hidden if the user removes text from a textbox after submitting it. Here is what I need: - Validations should not be dis ...

javascriptangularjsvalidation

Transform a text string into JSON format using Javascript

I need help converting a text string to JSON format using JavaScript. The text string is as follows: workingtable;AB8C;book_id;7541; I want to convert it into JSON format like this: {"workingtable":"AB8C","book_id":"7541"} Is there a specific JSON funct ...

javascriptjsonstringtextformat

Error: Unable to locate module 'react-calendar-heatmap'

After successfully creating a component that functioned flawlessly in my local application, I encountered an error when attempting to integrate it with npm: ./src/App.js Module not found: Can't resolve 'heatmap-calendar-react' in 'C:& ...

javascriptreactjsgithubnpmheatmap

Interactive Vue.js canvases that adapt and respond to various

I am currently working on adjusting my canvas to fit within its container in a Vue component. When I call resizeCanvas() in the mounted hook, I notice that the container's height and width are both 0. How can I create a canvas that dynamically fits it ...

javascriptcssvue.jshtml5-canvas

React component is unable to identify prop

I'm attempting to send an array of objects from the main App.js file to a smaller component using props. However, for some reason, the prop is not being recognized within the smaller component file. https://i.stack.imgur.com/WuyFr.png https://i.stac ...

javascripthtmlcssnode.jsreactjs

Dirty context detected in Material-UI TextField

Trying to understand how to check for dirtyness with material-ui's FormControl or TextField component. The TextField demo page mentions that TextField is made up of smaller components (FormControl, InputLabel, Input, and FormHelperText) which can be c ...

javascriptreactjsmaterial-ui

Sort various divs using a list

I have multiple divs containing different content. On the left side, there is a list of various categories. When a category is clicked, I want to display the corresponding div for that category. Initially, I want the main category to be loaded, with no opt ...

javascripthtmljqueryfilter

What are the steps for accessing a server-side WebControl from the client side?

Issue Overview: I am facing a problem with managing different types of input values in my dialog box. Depending on the selection from a dropdown list, the required input could be simple text, a date, or specific data from a database. I have successfully i ...

c#javascriptjquery.netajax

Is it possible to refresh a tree without having to reload the entire webpage?

I'm currently developing a web application utilizing zTree library. The tree structure is populated with data retrieved from a Golang backend server. Each leaf node in the tree should have custom icons that can change dynamically while the application ...

javascriptvue.jsztree

Tips for integrating Grails ${createLink} into your javascript code

Below is a JavaScript function that I have: function GetSelectedItem() { var e = document.getElementById("country"); var strSel = e.options[e.selectedIndex].value; alert(strSel); var url = "${createLink(controller:'country', act ...

javascriptgrails

In JavaScript, where are the values saved?

Can you clarify how JavaScript handles storage for primitive types and objects? Are primitive types always stored on the stack and objects on the heap, even within the scope of a function's execution? Also, are globally scoped variables and functions ...

javascriptstackheap-memory

How can AJAX be used to execute a PHP script that deletes a record from a database table?

Yesterday, I asked for help on how to save user-generated blog posts and I successfully tackled the database aspect of it. Now, my next goal is to be able to delete a blog post upon clicking a button with an onclick event. After researching extensively onl ...

javascriptjqueryhtmlajaxdatabase

Angular for user authentication page

I've been busy working on the login page, and I've managed to create a login UI that meets the requirements. However, I'm facing some challenges when it comes to validating the username and password. Being new to Angular and Web API, I might ...

htmlasp.netangularjsasp.net-web-api

Loading necessary CSS when needed in React JS

I am currently in the process of converting a bootstrap template to react framework. My question is, is there a way for me to load stylesheets on demand? For instance, if I have 2 components and I import the same stylesheet separately in both components, ...

javascriptcssreactjs

Retrieving data from a server using the GET method with parameters through axios in a React Native application

As someone new to Web requests, I have encountered a challenge that seems simple but has proven difficult for me. Despite searching the web, I am struggling to get a working response. When I input the URL 'http://www.test.com/callservice.php?action=s ...

javascriptjsonreact-nativehttprequestaxios

Validation of JSON Failed

Encountered a 400 Bad Request error while attempting to POST an answer using Postman, it appears to be a validator issue. Despite multiple attempts, I have yet to resolve this issue. Below are details of the JSON data being sent in the POST request along w ...

javascriptjsonnode.js

Utilizing Loops in a React Component's Function

(React web app development) I am currently working on a project where I need to check the stock status of products using their IDs in a JSON data loop. However, I am facing an issue with the condition checking for the ID match, as it always seems to return ...

javascriptreactjs

Exploring the effects of zooming on YouTube videos in Firefox

Strange phenomenon, but my website appears to be having display issues specifically on Firefox. Surprisingly, it looks perfectly fine on IE9, Safari, and Chrome. The layout of the site in Firefox seems to change when I zoom in or out, resulting in the You ...

htmlcssfirefoxyoutube