Вопрос

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?

Это было полезно?

Решение

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.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top