CODEWITHSUNDEEP
htmlcssanimation
IntriquedMan
IntriquedMan

Reputation: 233

CSS3 loading animation inherit from previous div

link to fiddle: http://jsfiddle.net/8tUEg/1/

work in progress: http://jsfiddle.net/8tUEg/9/

I have been working the first set of loading animations.

Instead of having the spinners just switch color I would like them to:

  1. inherit background-color from the previous div
  2. work the darker background-color across as they rotate
  3. repeat infinitely, moving the dark background-color to the first div, once it hits the end.

Any suggestions are appreciated.

.spinner {
  width: 20px;
  height: 20px;
  background-color: #007ACC;
  border: 1px;
  border-radius: 10px;
  margin: 10px;
  float: left;
  -webkit-animation: rotateplane 2s infinite ease-in-out;
  animation: rotateplane 2s  infinite ease-in-out;
}

.spinner:nth-child(1) { -webkit-animation: changecolor 2s infinite ease-in-out; animation: changecolor 2s  infinite ease-in-out; }
.spinner:nth-child(2) { -webkit-animation: changecolor 2s .5s infinite ease-in-out; animation: changecolor 2s .5s infinite ease-in-out; }
.spinner:nth-child(3) { -webkit-animation: changecolor 2s 1s infinite ease-in-out; animation: changecolor 2s 1s infinite ease-in-out; }
.spinner:nth-child(4) { -webkit-animation: changecolor 2s 1.5s infinite ease-in-out; animation: changecolor 2s 1.5s infinite ease-in-out; }

@-webkit-keyframes changecolor {
 0% {-webkit-transform: perspective(100px); }    
50% { background-color: #000; -webkit-transform: perspective(100px) rotateY(180deg)}
100% { -webkit-transform: perspective(100px) rotateY(180deg)  rotateX(180deg) }     
}

Upvotes: 1

Views: 287

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25954

As opposed to what Nicholas said in the comments, you can use a combination of animation delays and some child selectors to get what you want without any javascript

.example:nth-child(1) { -webkit-animation: changecolor 2s infinite ease-in-out; animation: changecolor 2s  infinite ease-in-out; }
.example:nth-child(2) { -webkit-animation: changecolor 2s .5s infinite ease-in-out; animation: changecolor 2s .5s infinite ease-in-out; }
.example:nth-child(3) { -webkit-animation: changecolor 2s 1s infinite ease-in-out; animation: changecolor 2s 1s infinite ease-in-out; }
.example:nth-child(4) { -webkit-animation: changecolor 2s 1.5s infinite ease-in-out; animation: changecolor 2s 1.5s infinite ease-in-out; }
@-webkit-keyframes changecolor { 50% { background-color: #000; } }

Demo

if you want the dots to be shaded differently on the start, you could use negative animation delays instead. For more CSS tricks similar to this, you may be interested in my CSS-Tricks article on the subject

Upvotes: 2

Related Questions