Parented CSS Animations? Nope.

by Wray Bowling

HTML

<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>

<hr>

<section style="-webkit-animation-delay:0.5s">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>

CSS

div{
    float:left;
    background-color:red;
    width:100px;
    height:100px;

    -webkit-animation-name: pulse-1;
    -webkit-animation-duration: 1s;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes pulse-1 {
 from {
   background-color: red;
   opacity: 1.0;
   -webkit-transform: scale(1.0) rotate(0deg);
 }
 to {
   background-color: blue;
   opacity: 0.75;
   -webkit-transform: scale(1.1) rotate(-5deg);
   -webkit-animation-name: pulse-2;
 }
}
@-webkit-keyframes pulse-2{
 from {
   background-color: green;
   opacity: 0.5;
   -webkit-transform: scale(1.1) rotate(5deg);
 }
 to {
   background-color: red;
   opacity: 1.0;
   -webkit-transform: scale(1.0) rotate(0deg);
 }
}