How to combine many CSS animation nth-of-type selectors into one?

Question

Given a large set of <hr> html elements which at page load should change color one after another. At the moment the animation works but it requires a large amount of repetitive manual labour in CSS for each consequtive newly added <hr> element in html. Since the transition intervals is the same for each next <hr> line, could this be written in a more elegant and shorter way in CSS?

The goal is to be able to add new hr elements without the need to change the CSS every time.

Again: this question is about how to do this (more elegantly) in CSS alone? (without js/sass/scss)

nav hr{
    border-top: 3px solid #BBB;
    border-bottom: 0px;
    margin: 10px 0;
}
 
nav hr:nth-of-type(01){animation: .5s ease 0.0s 1 gogo}
nav hr:nth-of-type(02){animation: .5s ease 0.1s 1 gogo}
nav hr:nth-of-type(03){animation: .5s ease 0.2s 1 gogo}
nav hr:nth-of-type(04){animation: .5s ease 0.3s 1 gogo}
nav hr:nth-of-type(05){animation: .5s ease 0.4s 1 gogo}
nav hr:nth-of-type(06){animation: .5s ease 0.5s 1 gogo}
nav hr:nth-of-type(07){animation: .5s ease 0.6s 1 gogo}
nav hr:nth-of-type(08){animation: .5s ease 0.7s 1 gogo}
nav hr:nth-of-type(09){animation: .5s ease 0.8s 1 gogo}
nav hr:nth-of-type(10){animation: .5s ease 0.9s 1 gogo}
nav hr:nth-of-type(11){animation: .5s ease 1.0s 1 gogo}
nav hr:nth-of-type(12){animation: .5s ease 1.1s 1 gogo}
 /* Boy this takes a lot of time for every new <hr> added in the html */

@keyframes gogo {
    0%   {border-top-color: #DDD}
    100% {border-top-color: #00F}
}

<nav>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
</nav>

JSFiddle Demo

Is javascript out of the question? That would be the obvious solution I think... — Mikk3lRo, Oct 17 '17 at 21:44
Possible duplicate of [Maintaining the final state at end of a CSS3 animation](https://stackoverflow.com/questions/12991164/maintaining-the-final-state-at-end-of-a-css3-animation) — tobiv, Oct 17 '17 at 22:04

score 1 · Accepted Answer · answered Oct 17 '17 at 22:00

1

Using less or scss you can generate your css without the manual labour. But it's still far from elegant.

Maybe some CSS genius knows something I don't, but I don't see any way around some minimal JavaScript:

var hrs = document.getElementsByTagName('hr');
for (var c = 0; c < hrs.length; c++) {
  hrs[c].style.animation = ".5s ease " + (c * 0.1) + "s 1 forwards gogo";
}

nav hr {
  border-top: 3px solid #BBB;
  border-bottom: 0px;
  margin: 10px 0;
}

@keyframes gogo {
  0% {
    border-top-color: #DDD
  }
  100% {
    border-top-color: #00F
  }
}

<nav>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
</nav>

answered Oct 17 '17 at 22:00

Mikk3lRo

3,477
17
38

Thanks for your answer @Mikk3lRo! This question is about how to do this (more elegantly) in pure CSS alone! (without js/sass/scss). Still +1 for your answer: if NO pure CSS method exists, then i will consider your answer. – Sam Oct 18 '17 at 11:56
1

I did understand it, and I do understand the desire to *not* use JS for visual styles. I'm also hoping someone can come up with a pure CSS solution, as that would be very useful in many situations... I just doubt it exists enough to suggest this (practical) solution to your (practical) problem ;) – Mikk3lRo Oct 18 '17 at 12:23
1

Thanks mate @Mikk3lRo your comment inspires me to put a bounty on my question which I will (eligable for bounty tomorrow) – Sam Oct 18 '17 at 12:37

Nenad Vracar · Answer 2 · 2017-10-17T22:09:43.190

1

To make hr stay blue you can use forwards as animation-fill-mode, and to dynamically increase delay time for each div you need scss. DEMO

$delay: 0.0s;

@for $i from 1 through  9 {
  hr:nth-child($i) {
    $delay = $delay + 0.1s;
    animation: .5s ease $delay 1 forwards  gogo;
  }
}

edited Oct 17 '17 at 22:09

answered Oct 17 '17 at 22:01

Nenad Vracar

118,580
15
151
176

Thanks for your answer @Nenad Vracar! This question is about how to do this (more elegantly) in pure CSS alone! (without js/sass/scss). Still +1 for your answer: if NO pure CSS method exists, then i will consider your answer. – Sam Oct 18 '17 at 11:55

How to combine many CSS animation nth-of-type selectors into one?

JSFiddle Demo

2 Answers2