CSS3 关键帧动画 - 类

Question

我正在尝试使用 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 设置动画吗？

Answer 1

从你的问题来看，你似乎在问，如果有人将鼠标悬停在 box1 上，它可以为 box 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 设置的。