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上，是否可以動畫框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瀏覽器。