CSS3 Übergänge/Animationen funktionieren nicht

Question

Ich versuche, CSS3 zu umgehen, wenn es um Übergänge und Animationen geht. Ich habe ein paar Kästchen und möchte den Titel und die Beschreibung animieren, wenn ich über die Box schwebe.

Um dies zum Laufen zu bringen, dachte ich, ich müsste die Animationen definieren, wenn das: Hover-Ereignis für das Wrapper-Element ausgelöst wird. Ich nehme an, ich führe das nicht korrekt in meinem CSS aus.

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

Sie mischen Übergänge mit Animationen, sollten Sie das nicht tun.

Die Animationen Keyframes moveFromBottom, moveFromRight usw. sind in Ihrem CSS nicht definiert.

Übergänge definieren, wie das DOM animiert werden soll, wenn sich eine Eigenschaft ändert, aber sie definieren nicht, welche Eigenschaft sich ändert. Ich denke gerne in Übergängen als eine Verknüpfung zu Animationen.

Animationen sind viel komplexer, aber viel leistungsfähiger. Aber ich glaube nicht, dass Sie Animationen brauchen, um das zu erreichen, was Sie wollen.

Ich habe Ihre jsFiddle ein wenig geändert, ich entfernte die Animationen und fügte eine Drehung mit den Übergängen hinzu. Hier ist der Link:

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