Question

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

Answer 1

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

动画关键帧moveFromBottom，moveFromRight等未在CSS中定义。

转换定义了属性更改时DOM应如何设置动画，但它们不定义哪些属性更改。我喜欢将过渡视为动画的快捷方式。

动画要复杂得多，但要强大得多。但我认为你不需要动画来达到你想要的效果。

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

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

CSS3过渡/动画不起作用

1 个答案: