CSS3 Keyframe Animation - Classes

Question

I'm trying to use a CSS3 keyframe animation that, upon hovering on one object, will cause the animation to fire in another. Right now I just have a simple keyframe:

  @keyframes fill
  {
    from   {background: red; height: 0px; width: 0px;;}
    to {background: green; height: 150px; width: 150px;}
  }

  @-moz-keyframes fill /* Firefox */
  {
    from   {background: red; height: 0px; width: 0px;}
    to {background: green; height: 150px; width: 150px;}
  }

  @-webkit-keyframes fill /* Safari and Chrome */
  {
    from   {background: red; height:0px; width:0px;}
    to {background: green; height: 150px; width: 150px;}
  }

And the html is as follows:

<div class="box1">
    <div class="box2"></div>
</div>

If my stylesheet applies the animation property to .box1, can it actually animate .box2?

Answer 1

From your question, it seems you are asking that if someone hovers over box1, can it animate box 2? Sure thing:

.box1:hover .box2{
    -moz-animation:spin .5s infinite linear;
}

@-moz-keyframes spin {
   0% { -moz-transform:rotate(0deg); }
   100% { -moz-transform:rotate(360deg); }
}

Here it is in more detail: http://jsfiddle.net/bW53x/2/

Note - the jsfiddle is set for Firefox.