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:\[code\] @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;} }\[/code\]And the html is as follows:\[code\]<div class="box1"> <div class="box2"></div></div>\[/code\]If my stylesheet applies the animation property to .box1, can it actually animate .box2?