CSS animation using a series of linked elements

Is there a way to make my buttons animate sequentially? For example, the second button should start animating only after the first one has finished. Any assistance would be greatly appreciated!

a {
      padding: 6px;
    display: block;
    width: 50px;
    font-size: 17px;
    margin: 10px auto;
    border: 2px solid;
    text-decoration: none;
    box-shadow: 0 0 0 rgba(204,169,44, 0.4);
    animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
    box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(255,208,0, 0.2);
      box-shadow: 00 0 0 10px rgba(255,208,0, 0.2);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}
<a class="btn-100" href="#">100</a>
<a class="btn-500" href="#">500</a>
<a class="btn-1250" href="#">1250</a>
htmlcssanimation

Answer №1

To adjust each element's animation timing, leverage the animation-delay property as suggested by others.

If you aim to create a continuous loop for the entire group, simply multiply the animation duration by the number of elements and make corresponding adjustments to your keyframes. In this example, the animation duration has been tripled while the keyframe percentages have been divided by three.

In scenarios where there is a substantial quantity of elements or they are dynamically generated, employing JavaScript might be a more efficient solution, as indicated here.

a {
  padding: 6px;
  display: block;
  width: 50px;
  font-size: 17px;
  margin: 10px auto;
  border: 2px solid;
  text-decoration: none;
  box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
  animation: pulse 6s infinite;
}

.btn-100 {
  animation-delay: 0s;
}
.btn-500 {
  animation-delay: 2s;
}
.btn-1250 {
  animation-delay: 4s;
}

@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
  }
  23.333% {
    -moz-box-shadow: 0 0 0 10px rgba(255, 208, 0, 0.2);
    box-shadow: 00 0 0 10px rgba(255, 208, 0, 0.2);
  }
  33.333% {
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}
<a class="btn-100" href="#">100</a>
<a class="btn-500" href="#">500</a>
<a class="btn-1250" href="#">1250</a>

Answer №2

To incorporate some animation delay into your buttons, you can follow this example:

.btn-500 {
    animation-delay: 0.6s;
}

.btn-1250 {
    animation-delay: 1.3s;
}

See the demonstration below:

a {
  padding: 6px;
  display: block;
  width: 50px;
  font-size: 17px;
  margin: 10px auto;
  border: 2px solid;
  text-decoration: none;
  box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
  animation: pulse 2s infinite;
}

.btn-500 {
  animation-delay: 0.6s;
}

.btn-1250 {
  animation-delay: 1.3s;
}

@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 10px rgba(255, 208, 0, 0.2);
    box-shadow: 00 0 0 10px rgba(255, 208, 0, 0.2);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}
<a class="btn-100" href="#">100</a>
<a class="btn-500" href="#">500</a>
<a class="btn-1250" href="#">1250</a>

Check it out on jsFiddle

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

What is the best way to ensure a string of words in HTML/CSS wraps to the next line seamlessly?

As I work on creating my portfolio website using Bootstrap and custom CSS, I am running into an issue with the game titles breaking in the middle when displayed. Despite my limited proficiency in English, I tried searching for a solution without success. ...

javascripthtmlcssbootstrap-5

Showcasing Wordpress blog entries on another webpage

Struggling with understanding how to showcase posts from a Wordpress blog on a website? You're not alone. Imagine you have a website www.site.com and a blog structured in Wordpress located at www.site.com/blog. Your task is to feature the recent post ...

phphtmlwordpress

Exploring innovative CSS/Javascript techniques for creating intricate drawings

When using browsers other than Internet Explorer, the <canvas> element allows for advanced drawing. However, in IE, drawing with <div> elements can be slow for anything more than basic tasks. Is there a way to do basic drawing in IE 5+ using o ...

javascriptcssinternet-explorerdrawing

Tips for designing a pre-selection process

I've been considering the idea of implementing a temporary screen that allows users to choose between different options before proceeding to a specific page. For instance, on the contact page, users would be prompted with a question like "Are you loo ...

javascripthtmlcss

Tips for properly passing data from Ajax to PHP and extracting value from it

I'm curious about how to receive a value from Ajax and then send that value to PHP. Can anyone provide some guidance on this? Specifically, I need the percent value obtained from Ajax to be sent to $percent for option value. <div class="form-g ...

phphtmljqueryajax

Adaptive Style Sheets Strategy

The images below depict the concept I am trying to achieve. The first image shows a longer width while the second one represents a shorter width. The red blocks are positioned on the right and left sides, with the yellow block adjusting its width based on ...

css

Crafting a responsible table design with the help of grid layout techniques

Is there a way to create a table that can adjust its rows and columns based on the container width or when resized? https://i.sstatic.net/xeZjl.png https://i.sstatic.net/kdpJC.png I attempted to use grid-gap in the background, but it resulted in empty red ...

htmlcss

Stopping the sound when its' Div is hovered over

I've managed to successfully trigger the audio to play on hover, but I'm having trouble getting it to pause when my mouse leaves the area. Check out the code in action here: https://jsfiddle.net/jzhang172/nLm9bxnw/1/ $(document).ready(functio ...

javascriptjqueryhtmlcss

Expanding image in card to fit device width using Ionic

Currently utilizing the ionic framework and attempting to expand the image within the card to fit the device width. Referencing the example provided here, here is my current code progress. <div class="list card"> <div class="item item-avatar" ...

cssionic-framework

Adding a class to a child component layout from a parent component in Angular 12 and Typescript can be achieved by using the ViewChild decorator

Incorporating the child component into the parent component is an important step in the structure of my project. The dashboard component serves as the child element, while the preview component acts as the parent. Within the parent (preview) component.htm ...

jquerycssangulartypescript

``How can I prevent browser popups/tooltips from appearing when a user exceeds the maximum value in a number

Is there a way to prevent the tooltip from appearing on the image when a user manually enters a quantity that exceeds the maximum allowed? The tooltip pops up when the form is submitted, and I need to find a way to turn it off. It seems like this tooltip ...

htmlreactjsmaterial-uireact-hook-form

Trying to understand the strange behavior of HTML parsing with jQuery in Javascript and Firefox

I have been working on a script to parse an HTML page using jQuery. The script runs smoothly in Chrome, IE, and Safari, but I'm facing some unexpected behavior while testing it in Firefox (version 36.0.1). Here's the code snippet: $.ajax({ u ...

javascriptjqueryhtmlfirefox

"Interactive feature allowing database updates on a web page without the need for a page

I have a like button that contains an ID pulled from a database. My goal is to click the like button, update the database, and then switch it to unlike without having to reload the page. Below is the code for clarity: **index.php: ** <script type=&quo ...

phphtmlajax

Unique ideas for organizing the layout and loading of content on my website

Last year, I created a fan site dedicated to a popular PC game, but now I feel like it could use some improvements. Currently, all the pages on my site share a common header and footer, with only the main content area changing from page to page. My curren ...

phphtmlcssajax

What is causing the issue of my oversized images not showing up on GoDaddy?

I recently uploaded my website on GoDaddy and I am facing an issue where some of my small images (sizes: 872 × 546px) are displaying perfectly fine, but the large ones (banners with a size of 2700 × 900px) aren't showing up. Does anyone have ...

htmlcsscpanelgodaddy-api

Tips for generating a <div> element with multiple children using a loop

section, I have configured a div element with a class named div class = "postWindow". When it comes to the HTML code, here is an example: <div class = "postWindow"> <div class = "userName">Initial Name</div> <div class = "p ...

javascriptjqueryhtmljsonajax

Static size element overlapping side panel

I am trying to center a fixed width element on my page, ensuring that it stays centered if it fits within the page width but extends beyond the page if needed with scroll accessibility. I have almost achieved this, but the element overlaps with the sidebar ...

htmlcss

Navigate to a web page coded in HTML using Vue JS

I am currently utilizing Vue.js. My goal is to redirect from my Vue component to a standard HTML page. Since it involves a License Agreement that cannot be converted into a Vue component, I am looking for a way in Vue to link to an HTML page and open it ...

htmlvue.js

Safari 5.1.7 causing unusual behavior on the website

Despite running smoothly in most browsers, this website goes haywire and crashes on Safari when viewed on a Mac. I've attempted troubleshooting by removing the Google map, CSS transforms, and the Stellar jQuery plugin, but the issue persists. Does any ...

jqueryhtmlcsssafari

Acquire a structured list of the focus order within the DOM elements

It intrigues me how the DOM is constantly changing. I'm curious if there's an easy way to retrieve a sorted list of focusable elements within the DOM at any moment. This would encompass nodes with a specified tabindex value that isn't -1, as ...

javascripthtmldomkeyboardaccessibility