CODEWITHSUNDEEP
htmlcsscss-transitions
Jimmy
Jimmy

Reputation: 12487

CSS only - Sequentially fade in row of table

I'm looking at code like this:

.my-element:nth-child(1) {
  -moz-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
.my-element:nth-child(2) {
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.my-element:nth-child(3) {
  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

Is there a way in CSS only to do some sort of loop, i.e in sudo code:

For each element, delay fadein + 0.1s

Then I will get the effect of having each row fade in one after the other without having to specifically write CSS for nth child all the way up to 50. This is my test HTML table to test:

https://jsfiddle.net/268n9gcq/

Is this possible without having to use javascript?

Upvotes: 4

Views: 2242

Answers (1)

Brett DeWoody
Brett DeWoody

Reputation: 62763

To do this with only CSS you'll need to create nth-child() rules as you've already started. Less, Sass or another compiler will help keep your code more manageable, and create a CSS-only solution at the same time.

In the CSS compiler you'll create a loop similar to this (for SCSS):

@for $i from 1 through 10 {
  tr:nth-child(#{$i}) {
    $time: $i * 3 + unquote('');
    $delay: unquote('0.' + $time + 's');
    animation-name: showRow;
    animation-duration: 1s;
    animation-delay: $delay; 
    animation-timing-function: ease-in;
  }
}

Upvotes: 1

Related Questions