6

あるオブジェクトにカーソルを合わせると、別のオブジェクトでアニメーションが起動する CSS3 キーフレーム アニメーションを使用しようとしています。今、私は単純なキーフレームを持っています:

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

また、html は次のとおりです。

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

スタイルシートでアニメーション プロパティを .box1 に適用すると、実際に .box2 をアニメーション化できますか?

4

1 に答える 1

2

あなたの質問から、誰かがボックス1の上にカーソルを置いた場合、ボックス2をアニメーション化できるかどうか尋ねているようです? 確実なこと：

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

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

詳細はこちら: http://jsfiddle.net/bW53x/2/

注 - jsfiddle は Firefox 用に設定されています。

于 2013-04-04T19:10:31.980 に答える