enhance the brilliance of elements at different intervals

My latest CSS animation project involves creating a stunning 'shine' effect on elements with a specific class. The shine effect itself is flawless, but having all elements shine simultaneously is making it look somewhat artificial.

I've been racking my brain trying to figure out how to vary the shine times for each element, but I can't seem to crack it. Everything I've attempted so far has either been ineffective or simply doesn't work at all.

    .loading-element{
        position: relative;
        background: #e0e0e0;
    }
    .loading-element::after{ /* this is the animated pseudo-element */
    content: "";
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.8) 50%,
        rgba(247,247,247,0) 99%,
        rgba(247,247,247,0) 100%);
        transform: translateX(100%);
        animation: shine 1s infinite 3s;
    }
    .index-load_track-item{
        width: 426px;
        height: 117px;
        margin: 30px 0;
    }
    .index-load-track_outer-artwork, .index-load-track_outer-waveform{
    float: left;
    }
    .index-load-track_outer-artwork{
        width: 117px;
        height: 117px;
        margin-right: 9px;
    }
    .index-load-track_outer-artwork .loading-element{
    width: 100%;
    height: 100%;
    }
    .index-load-track_outer-waveform{
        width: 300px;
        height: 60px;
    }
    .index-load-track_outer-waveform .loading-element{
    width: 100%;
    height: 100%;
    }
    
    /* animation */
    @keyframes shine{
    0%{ transform:translateX(-100%); }
    100%{ transform:translateX(100%); }
    }
    <div class="index-load_track-item">
      <div class="index-load-track_outer-artwork">
    <div class="loading-element"></div>
    </div>
    <div class="index-load-track_outer-waveform">
    <div class="loading-element"></div>
    </div>
    </div>
    <div class="index-load_track-item">
      <div class="index-load-track_outer-artwork">
    <div class="loading-element"></div>
    </div>
    <div class="index-load-track_outer-waveform">
    <div class="loading-element"></div>
    </div>
    </div>

htmlcssanimation

Answer №1

If you're looking to incorporate jQuery into your project, consider using the following code snippet:
(Added some CSS styling with explanatory comments for clarity)

// For each element with the ".loading-element" class, assign random delays and durations on page load
$('.loading-element').each(function(e) {
  $(this).css({
    "animation-delay": (-10 * Math.random()) + "s",
    "animation-duration": (1 + 2 * Math.random()) + "s"
  });
});
.loading-element {
  position: relative;
  background: #e0e0e0;
  /* Added below to ensure proper display */
  overflow: hidden;
}

.loading-element::after {
  /* animated pseudo-element for shine effect */
  content: "";
  position: absolute;
  top: 0;
  filter: blur(5px);
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(247, 247, 247, 0) 99%, rgba(247, 247, 247, 0) 100%);
  transform: translateX(100%);
  animation-name: shine;
  animation-duration: inherit;
  animation-iteration-count: infinite;
  animation-delay: inherit;
}

.index-load_track-item {
  width: 426px;
  height: 117px;
  margin: 30px 0;
}

.index-load-track_outer-artwork,
.index-load-track_outer-waveform {
  float: left;
}

/* Additional styles for specific elements */

/* Animation keyframes */
@keyframes shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="index-load_track-item">
  <div class="index-load-track_outer-artwork">
    <div class="loading-element"></div>
  </div>
  <div class="index-load-track_outer-waveform">
    <div class="loading-element"></div>
  </div>
</div>
<div class="index-load_track-item">
  <div class="index-load-track_outer-artwork">
    <div class="loading-element"></div>
  </div>
  <div class="index-load-track_outer-waveform">
    <div class="loading-element"></div>
  </div>
</div>

⋅ ⋅ ⋅

You can achieve the same effect using CSS variables as well!
It might be a more efficient and straightforward approach if applicable.

// On load, add random delays and durations to each of the ".loading-element"s
$('.loading-element').each(function(e) {
  $(this).css({
    "--shine-delay": (-10 * Math.random()) + "s",
    "--shine-duration": (1 + 2 * Math.random()) + "s"
  });
});
.loading-element {
  position: relative;
  background: #e0e0e0;
  overflow: hidden;
}

.loading-element::after {
  content: "";
  position: absolute;
  top: -10px;
  bottom: -10px;
  filter: blur(8px);
  width: 100%;
  background: linear-gradient(to right,
    rgba(255, 255, 255, 0.0) 0%,
    rgba(255, 255, 255, 0.0) 10%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.0) 90%,
    rgba(255, 255, 255, 0.0) 100%
  );
  transform: translateX(100%);
  animation: shine var(--shine-duration) infinite var(--shine-delay);
}

/* Additional styles for specific elements */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="index-load_track-item">
  <div class="index-load-track_outer-artwork">
    <div class="loading-element"></div>
  </div>
  <div class="index-load-track_outer-waveform">
    <div class="loading-element"></div>
  </div>
</div>
<div class="index-load_track-item">
  <div class="index-load-track_outer-artwork">
    <div class="loading-element"></div>
  </div>
  <div class="index-load-track_outer-waveform">
    <div class="loading-element"></div>
  </div>
</div>

I trust this information will be beneficial to you.

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

JavaScript: retrieving undefined value from a text element

My goal is to retrieve the text entered into each textbox by querying and looping through their ID tags. However, when I attempt to print what I have retrieved, it always displays "undefined". Seems like your post consists mostly of code: </h ...

javascripthtmlselectorelement

What can be done to stop Bootstrap columns from shifting positions or stacking on top of each other unexpectedly?

I'm currently working on a testimonial section for my project. The challenge I'm facing is that the content within the 4 divs is not evenly distributed. As a result, when I try to adjust the width of the screen and expect them to align in a 2-2 f ...

htmlcsstwitter-bootstrap

Updating the progress bar without the need to refresh the entire page is

Currently, I have two PHP pages: page.php and loader.php. Loader.php retrieves data from MySQL to populate a progress bar, while page.php contains a function that refreshes loader.php every second. This setup gets the job done, but it's not visually a ...

javascriptphphtmljqueryajax

Ways to develop a dynamic HTML TransferBox featuring a custom attribute

I am in need of developing a customized transferbox using HTML, JavaScript, and JQuery. The user should be able to select from a list of options and associate them with attributes. This selection process should involve transferring the selected options be ...

javascriptjqueryhtml

Dynamic grid arrangement showcasing cells of varying heights

I am dealing with a grid layout where cells are dynamically generated using the following code: <style> .calWrapper{ width:200px; float:left; } </style> <div class="container"> <?php for($i=1; $i<=12; $i++){ echo ...

htmlcssgrid-layout

Is there a way to eliminate this from the footer section?

Check out my website: If the text is not visible, try using a larger monitor or zooming out in your browser. I've added an image to help explain: I only want to remove that element + title on the first page This is the HTML code: <div id="to ...

htmlcss

Animation for maximum height with transition from a set value to no maximum height

While experimenting with CSS-transitions, I encountered an unusual issue when adding a transition for max-height from a specific value (e.g. 14px) to none. Surprisingly, there is no animation at all; the hidden elements simply appear and disappear instant ...

javascriptjqueryhtmlcss

What's the best way to vertically center text in a div with overflow hidden?

In my ASP GridView, I am trying to display a table with a fixed number of lines in each TD element. To achieve this, I have decided to place a div inside each TD so that I can customize the height and layout. table.XDataGridView td div.inner-table-div { h ...

htmlcssasp.net

What is the process for retrieving the value of a text box using V-Model?

Link to the code snippet <td><input class="input" v-model="user.name" /></td> After accessing the provided link, I noticed a unique input textbox. Is there a way to extract specific text values like a,b,c from this te ...

javascripthtmlvue.js

Having trouble getting Ajax post to function properly when using Contenteditable

After successfully implementing a <textarea> that can post content to the database without needing a button or page refresh, I decided to switch to an editable <div> for design reasons. I added the attribute contenteditable="true", but encounte ...

javascriptphphtmlajax

Looking for assistance with CSS border animation

Below is my code snippet: .section-one { position: relative; background: #ffffff; } .section-one h2 { color: #000000; font-size: 32px; margin: 0px 0px 10px 0px; padding: 0px; font-family: "AzoSans-Medium"; } ... /* ...

htmlcss

Tips for Customizing the StrongLoop LoopBack Explorer CSS

Our team is currently utilizing Strongloop's LoopBack framework for our REST APIs and we are looking to customize the CSS of the LoopBack Explorer. Unfortunately, it seems unclear which CSS files are being employed (LoopBack vs Swagger) and their exac ...

cssuser-interfaceloopbackjsstrongloop

The div element is failing to adjust its height correctly to match its parent container

I'm struggling to make the red border that wraps around the text extend all the way to the bottom of its parent div. Setting the height to 100% isn't achieving the desired effect, as it needs to match the height of the image. Tip: Try resizing y ...

htmlcss

Issue with transition on the second attempt

In this code snippet, I have managed to achieve my desired outcome but it seems to only work on the first run. I am not sure why this is happening, so if anyone can help me out that would be greatly appreciated. Here is a demo of the code in action: HTML ...

jqueryhtmlcss

Exploring the mechanics behind jQuery selectors

Currently, I'm working on the Interactive website: Push menu training exercise on codecademy. However, I am a bit confused about jquery selectors. Specifically, in the example provided below, why does the 'menu' html element require a ' ...

jqueryhtml

Selenium's get_attribute method is not providing a value

Below is the code I am currently working with: url="https://www.betexplorer.com/soccer/poland/ekstraklasa/lks-lodz-lechia-gdansk/fgQY4hAD/" browser = webdriver.Chrome() browser.get(url) time.sleep(1.5) trs = browser.find_elements_by_xpath(".//div[@id=&a ...

pythoncssseleniumweb-scrapingbeautifulsoup

What is the secret to creating a button that can sort text and another button that flips the word density in my content?

I'm not a fan of having something like this because it's displeasing to the eye: https://i.stack.imgur.com/3F4sp.jpg Instead, I prefer my word density to be more organized and structured. How can I achieve this? Sort by highest word density fi ...

javascripthtml

The multiple-choice selection tool is not displaying any choices

I am having an issue with my ng-repeat code in conjunction with the jquery multiple-select plugin. Despite using this plugin for a multiple select functionality, the options generated by ng-repeat are not visible. Below is the code snippet in question: & ...

javascriptjqueryhtmlcssangularjs

Struggling to float <aside> to the left of <article> for proper alignment?

tldr; I'm attempting to position the aside-section to the left of the article-section (similar to a sidebar/side column), but my "float" property doesn't seem to be working at all. Is there a way to achieve this without modifying the HTML code an ...

htmlcss

Tips for preventing the parent element's height from fluctuating when displaying a child div using v-if

I have a main container and an inner container. The inner container is displayed using v-if. I want to include a transition effect on the inner element, but after the transition ends, the height of the parent container changes abruptly and looks unattracti ...

cssvue.jsvuejs2vue-componenttransition