1

当涉及到过渡和动画时，我正试图围绕 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;
}
4

1 回答 1

1

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

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

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

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

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

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

于 2012-04-04T20:09:25.693 回答