CSS3 过渡/动画不起作用答案

【问题标题】：CSS3 Transitions/Animations not workingCSS3 过渡/动画不起作用
【发布时间】：2012-04-18 13:11:59
【问题描述】：

当涉及到过渡和动画时，我正试图围绕 CSS3。我有一些框，当鼠标悬停在框上时，我希望标题和说明能够动画化。

为了让它工作，我想我必须在包装元素的 :hover 事件被触发时定义动画。我想我只是没有在我的 CSS 中正确执行此操作。

.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;
}

【问题讨论】：

标签： animation css css-transitions

【解决方案1】：

您将过渡与动画混合在一起，您不应该这样做。

动画关键帧 moveFromBottom、moveFromRight 等未在您的 CSS 中定义。

转换定义了当属性改变时 DOM 应该如何动画，但它们没有定义哪些属性改变。我喜欢将过渡视为动画的捷径。

动画要复杂得多，但功能要强大得多。但我认为你不需要动画来实现你想要的。

我稍微更改了您的 jsFiddle，删除了动画并使用过渡添加了旋转。这是链接：

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

【讨论】：