CSS3轉換/動畫不能正常工作

Question

我想繞過CSS3繞過轉換和動畫。我有一些盒子，我希望標題和說明在盒子上方懸停時動畫。

爲了得到這個工作，我想我必須在包裝元素的：hover事件觸發時定義動畫。我想我只是沒有在我的CSS中正確執行。

http://jsfiddle.net/qXdNc/

.feature-box, .feature-box-title, .feature-box-image, .feature-box-desc { 
    -webkit-transition: all 300ms linear; 
    -moz-transition: all 300ms linear; 
    -o-transition: all 300ms linear; 
    -ms-transition: all 300ms linear; 
    transition: all 300ms linear; 
} 
.feature-box:hover .feature-box-title { 
    -webkit-animation: moveFromRight 300ms ease; 
    -moz-animation: moveFromRight 300ms ease; 
    -ms-animation: moveFromRight 300ms ease; 
} 
.feature-box:hover .feature-box-desc { 
    -webkit-animation: moveFromBottom 500ms ease; 
    -moz-animation: moveFromBottom 500ms ease; 
    -ms-animation: moveFromBottom 500ms ease; 
} 

Answer 1

你是混合的過渡與動畫，你不應該這樣做。

動畫關鍵幀moveFromBottom,moveFromRight等未在您的CSS中定義。

過渡定義了屬性更改時DOM如何動畫，但它們不定義哪些屬性更改。我喜歡將轉換視爲動畫的捷徑。

動畫要複雜得多，但功能要強大得多。但我不認爲你需要動畫來實現你想要的。

我改變了你的jsFiddle一點，我刪除了動畫並添加了一個使用轉換的旋轉。這裏是鏈接：

http://jsfiddle.net/canassa/qXdNc/1/