CSS transition color progressive

Question

Background:

• I'm building my app using ReactJS.
• As Facebook recommend, I'm avoiding using JQuery as much as possible.
• I'm not using ReactTransitionGroup plugin, just pure CSS

This is what I'm looking for:

But I can't figure out how to get this effect without iterating elements through JQuery.

This is what I have right now, as you can see, It is very distant what I'm expecting. To try it just check/uncheck the checkbox.

.dot-container{
  display: flex;
  flew-direction: row;
}

.dot{
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: gray;
  border-radius: 100%;
  margin-right: 10px;
}

#check:checked ~ .dot.chk {
  background-color: blue;
  transition: all 500ms ease-in 500ms;
}

<div class="dot-container">
  <input type="checkbox" id="check" />
  <div class="dot chk"></div>
  <div class="dot chk"></div>
  <div class="dot chk"></div>
  <div class="dot chk"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

Questions:

1. Can I achieve it using pure CSS?
2. If the only possible way is to use JQuery, what should I keep in my mind to reach a good solution?

Answer 1

While this method may be a bit extensive, it should work for your purpose.

.dot-container{
  display: flex;
  flew-direction: row;
}

.dot{
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: gray;
  border-radius: 100%;
  margin-right: 10px;
}

#check:checked ~ .dot.chk {
    background-color: blue;
}

#check:checked ~ .dot.chk:nth-child(2) {
  transition: all 500ms ease-in 300ms;
}

#check:checked ~ .dot.chk:nth-child(3) {
  transition: all 500ms ease-in 500ms;
}

#check:checked ~ .dot.chk:nth-child(4) {
  transition: all 500ms ease-in 700ms;
}

#check:checked ~ .dot.chk:nth-child(5) {
  transition: all 500ms ease-in 900ms;
}

#check:checked ~ .dot.chk:nth-child(6) {
  transition: all 500ms ease-in 1100ms;
}

#check:checked ~ .dot.chk:nth-child(7) {
  transition: all 500ms ease-in 1300ms;
}

#check:checked ~ .dot.chk:nth-child(8) {
  transition: all 500ms ease-in 1500ms;
}

#check:checked ~ .dot.chk:nth-child(9) {
  transition: all 500ms ease-in 1700ms;
}

#check:checked ~ .dot.chk:nth-child(10) {
  transition: all 500ms ease-in 1900ms;
}

#check:checked ~ .dot.chk:nth-child(11) {
  transition: all 500ms ease-in 2100ms;
}

<div class="dot-container">
  <input type="checkbox" id="check" />
  <div class="dot chk"></div>
  <div class="dot chk"></div>
  <div class="dot chk"></div>
  <div class="dot chk"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

By making use of nth-child(n), you can specify a specific transition for each dot. By changing the fourth parameter, transition-delay, you can achieve the look you're after.