Question

I’m trying to wrap my head around CSS3 when it comes to transitions and animations. I have some boxes and I’d like the title and description to animate when hovering over the box.

In order to get this to work, I thought I had to define the animations when the :hover event for the wrapper element is fired. I suppose I’m just not executing this correctly in my 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

You are mixing transitions with animations, you shouldn’t do that.

The animations keyframes moveFromBottom, moveFromRight, etc are not defined in your CSS.

Transitions define how the DOM should be animated when a property changes, but they don’t define which property changes. I like to think in transitions as a shortcut to animations.

Animations are much more complex, but much more powerful. But I don’t think you need animations to achieve what you want.

I changed your jsFiddle a little bit, I removed the animations and added a rotation using the transitions. Here is the link:

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