Animation d'images clés CSS3 - Classes

Question

J'essaie d'utiliser une animation CSS3 keyframe qui, au survol d'un objet, déclenche l'animation dans un autre objet. Pour l'instant, je n'ai qu'une simple image clé :

  @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;}
  }

Et le html est le suivant :

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

Si ma feuille de style applique la propriété d'animation à .box1, peut-elle animer .box2 ?

Answer 1

D'après votre question, il semble que vous demandiez que si quelqu'un survole la boîte 1, la boîte 2 puisse être animée. Bien sûr :

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

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

Voici plus de détails : http://jsfiddle.net/bW53x/2/

Note - le jsfiddle est configuré pour Firefox.