Can CSS3 animations be executed sequentially for each child element?

Question

Can CSS3 animations be executed sequentially for each child element?

Have you ever tried creating a CSS3 animation in HTML? You can check out an example here.

<div class="parent">
    <a href="#">First</a>
    <a href="#">Second</a>
    <a href="#">Third</a>
</div>

With the following CSS:

@-webkit-keyframes anim{
    0% {color:blue}
    10% {color:red}
}
.parent a {
    color:black;
    -webkit-animation: anim 3s infinite;
}

However, this setup applies color changes to all children simultaneously. Is there a way to change the color of each child individually?

Essentially, we want to pause animations for other children while running a specific animation for only one child at a time, and then move on to the next child.

Keep in mind that the number of children is unknown, so we need to set the animation duration for each child independently rather than for the entire cycle.

css animation css-transitions

Answer 1

Answer №1

Currently, achieving this effect with CSS alone is not possible. (Although there may be possibilities in the future with CSS-Variables. However, as of now they are still experimental).

One alternative option is to create something (though it may not be very visually appealing) using LESS or SASS (example provided below). Note: This approach requires knowing the maximum number of elements that could potentially be there.

@for $i from 1 through 19 {
    .parent a:nth-child(#{$i}) { -webkit-animation-duration: $1s; }
}

Another suggested solution: If you prefer not to go that route, utilizing JavaScript can achieve the desired result. It can be done simply like this:

$.each($('.parent a'), function(index, elem) {
    $(elem).css('-webkit-animation-duration', index + 's');
});

Answer 2

Currently, achieving this effect with CSS alone is not possible. (Although there may be possibilities in the future with CSS-Variables. However, as of now they are still experimental).

One alternative option is to create something (though it may not be very visually appealing) using LESS or SASS (example provided below). Note: This approach requires knowing the maximum number of elements that could potentially be there.

@for $i from 1 through 19 {
    .parent a:nth-child(#{$i}) { -webkit-animation-duration: $1s; }
}

Another suggested solution: If you prefer not to go that route, utilizing JavaScript can achieve the desired result. It can be done simply like this:

$.each($('.parent a'), function(index, elem) {
    $(elem).css('-webkit-animation-duration', index + 's');
});

Answer 3

Answer №2

http://jsfiddle.net/TS9gr/ check out this version with animation-delay included.

@genius_coder mentioned that while it is achievable, you must know the exact number of children in order to apply the animation correctly. Each child should have its own animation-delay for the effect to work as intended.

In order for the animation to run endlessly, the animation-duration must cover the entire length. Keep in mind that the animation-delay only affects the initial run and will not be applied during subsequent iterations.

My keyframes are set as follows:

0% {color:blue}
33% {color:red}
66% {color: black}
100% {color: black}

The duration of the animation is 9 seconds. This means that the color will transition from blue to red in the first approximately 3 seconds, then from red to black between 3rd and 6th second, remaining black until the end of the animation.

Answer 4

http://jsfiddle.net/TS9gr/ check out this version with animation-delay included.

@genius_coder mentioned that while it is achievable, you must know the exact number of children in order to apply the animation correctly. Each child should have its own animation-delay for the effect to work as intended.

In order for the animation to run endlessly, the animation-duration must cover the entire length. Keep in mind that the animation-delay only affects the initial run and will not be applied during subsequent iterations.

My keyframes are set as follows:

0% {color:blue}
33% {color:red}
66% {color: black}
100% {color: black}

The duration of the animation is 9 seconds. This means that the color will transition from blue to red in the first approximately 3 seconds, then from red to black between 3rd and 6th second, remaining black until the end of the animation.

Can CSS3 animations be executed sequentially for each child element?

Answer №1

Answer №2

Similar questions

Ensure that the image inside a resizable container maintains the correct aspect ratio

Top div click causes bottom div to slide

The minimum height of the IE element could not fully expand within its flex container that was set to absolute positioning

I'm interested in clicking on an image within a div to trigger a page refresh and then automatically hide the div once the page has refreshed

Troubleshooting issue arising from transferring code from CodePen to a text editor

Tips to store Google fonts in the assets directory

Tips for disabling viewport resizer while accessing the Console panel in Chrome using Control+Shift+J

Is it possible to center content with Bootstrap?

Placing a div over a JavaScript element

jQuery image resizing for elements

Above, there are two components with a scrollbar, while below there is a fixed div that remains in place when the screen

having difficulty applying a border to the popup modal

"Exploring the Power of Internal Hyperlinks in HTML

Designing a fixed bottom footer enclosed within a wrapper that expands from the top header to the bottom footer

JQuery functions for click and hover are not functioning as expected on a div element

Spacious width that doesn't require a horizontal scrollbar for navigation

Keep moving the box back and forth by pressing the left and right buttons continuously

The visibility of content that flickers on the webpage should be hidden with the display: none property during loading

Tips for closing the navbar by clicking elsewhere on the page

Tips on concealing the overflow content within a Material UI table cell, rather than allowing it to wrap around