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

Text that is superimposed onto an image

Struggling to implement a hovering text over an image? I attempted to follow a tutorial, but couldn't adapt it to my project. While I managed to create a fixed overlay, I aim for a responsive solution that adjusts with resolution changes. My goal is t ...

htmlcss

Customizing jquery mobile styling

I am dealing with a table where the challenge lies in aligning the text to center in the header. .info-header { font-size: small; text-align: center; } Despite setting the alignment, the row still inherits left alignment from jQuery mobile. Seeking ...

htmlcssjquery-mobile

Using pre-existing CSS state background colors in GTK3

I am currently in the process of adapting a PyGTK2 application. This particular application performs tasks such as: self.normal_color = editor.style.base [Gtk.STATE_NORMAL] self.insensitive_color = editor.style.base [Gtk.STATE_INSENSITIVE ...

pythoncssgtk3

What is the best way to rearrange Bootstrap columns for extra small screens?

In my bootstrap layout, I have a row with two columns: <div class="row"> <div class="col-md-5 col-md-push-7"> Content in this column should display on the right </div> <div class="col-md-7 col-md-pull-5"> ...

csstwitter-bootstraptwitter-bootstrap-3

Iterating through a variety of selectors on a webpage to consolidate and save into a single large data frame

I need help with a project and got a quick response last time, so here I am again. The code below is scraping data from a website and adding a column to indicate which instance of the table it is extracting. My current challenge is loading all Game Recency ...

pythonhtmlpandasseleniumweb-scraping

Issues with Internet Explorer causing headaches with CSS :first-child selector malfunctioning, experiencing strange behavior when utilizing Google Web Fonts

Having some trouble with the layout of a website, particularly in IE. The issue can be observed at . When comparing the page in IE to Firefox, there are noticeable differences. Firstly, the top module on the right side is not displaying correctly in IE. I ...

htmlcsscross-browserinternet-explorer-9css-selectors

Bracketing the Webpage: A Display of Unique Design

Currently, I am utilizing the Brackets code editor to create a webpage in HTML format. My aim is to transfer these files to another computer so that the user on that device can view the webpage created from these HTML files. Strangely, when I open the HTML ...

htmlcssadobe-brackets

Select a dropdown menu option in Cypress by clicking on it only if it is checked

In this html code snippet, I have multiple elements within a dropdown menu. I am looking for a way to click on an item only if it is selected (has the class selected) or has a check mark in front of the name, as shown in this screenshot. How can I achieve ...

javascripthtmlautomationcypress

What is the process for assigning default values to dynamically generated form elements?

I have been working on building a single-page application (SPA) using JavaScript and jQuery. During the process, I encountered an issue with a dynamic form. The user is able to add specific fields as needed, but if they don't generate and utilize all ...

javascriptjqueryhtml

Animate CSS every quarter of a minute

Is it possible to create an animation that runs infinitely every 15 seconds in the sequence 1, 2, 3, 4, 3, 2, 1 with different delays for each item using CSS? The animation delay seems to only work on the first iteration. Achieving this effect is easy wi ...

htmlcssanimation

Issue with displaying Bootstrap Tooltip

Recently, I launched a fresh website (currently residing on a sub-domain). However, I am facing an issue with the tooltip not showing up when hovering over the text Get the FinEco Bookmarklet. <span class="bookmarklet"><span class="fa fa-bookmark ...

htmlcsstwitter-bootstraptooltip

Problem with Flickity's is-selected feature

I am currently exploring Flickity and its functionality. I have a carousel that auto-plays, with the selected cell always placed in the middle and highlighted with a grey background. However, I would like to customize it so that the selected cell is positi ...

htmljquerycssflickity

Unable to choose the option from the modal that functions similarly to a drop-down menu

I need to choose a field that functions similarly to a dropdown box, but does not actually display as one. The select field reveals its values in a pop-up with values and sub-values that I need to select. Challenges : I'm struggling to locate the ob ...

javahtmlcssxpathselenium

PHP and MySQL combination for efficient removal of multiple dropdown choices

I'm struggling to figure this out. Essentially, it's a form with multiple dropdown menus where users can select one or more items to filter MySQL data results. I want to dynamically update the other dropdown menus as the user makes selections. Fo ...

javascriptphpjqueryhtmlmysql

Easy fix for 3 circles (images) placed in a row with equal distance between them and perfectly aligned

I've been spending the last 3 days trying to accomplish this specific task: 3 circular images arranged horizontally with equal spacing Occupying 70% of the central screen area Height and width based on percentages for browser resizing adjustment It ...

htmlcssflexbox

Having trouble with positioning divs on top of each other? Struggling to get position absolute to work correctly?

Currently, I am utilizing flexbox to construct a grid layout. However, I have hit a roadblock when attempting to make the divs stack on top of each other. The overflow:auto is hidden and position relative has been added to the carddiv. While the divs are s ...

htmlcssreactjs

Tips for implementing a custom filter in an AngularJS JavaScript controller

Can anyone help me with creating a custom filter in an AngularJS JavaScript controller? I need to be able to search for items in an array called segments by their SegmentId. The filter should iterate through the segments array and return the segment that ...

javascripthtmlangularjsangularjs-filter

Unable to apply styling to table cells that are dynamically added using JQuery within an Angular

Currently working on setting up a form using Angular. Within the hotel.view.html file, there is a table that looks like this: <table id="rooms"> <tr> <td>Room Type</td><td>Beds</td><td>Q.ty</td ...

jquerycssangular

The window.frames function is coming back with a blank, empty

In an attempt to set up a simple HTML file on my local machine, I have the following code: <html> <head> <title>Testing</title> </head> <frameset framespacing="0" frameborder="0" rows="20px,100%" border="0"> ...

htmlframeset

Mastering the art of using div boxes in boxing form

When I box in information using divs, I've noticed that sometimes the wrapping boxes don't fill out the space completely. This can result in elements from other wrappers encroaching into the box area. For example: <div> <div style="le ...

htmlcss