CSS3 Keyframe Animation - Classes

css, html, keyframe

Solution

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.

Problem

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?

Original source