Q:

CSS3 Keyframe Animation - Classes

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? 

A:

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.