Animation CSS3过渡/动画不工作

当涉及到过渡和动画时，我正试图将我的头脑集中在CSS3上。我有一些框，我想标题和描述动画时，悬停在框

为了让它工作，我想我必须在启动包装器元素的：hover事件时定义动画。我想我只是没有在CSS中正确地执行这个

---

你把过渡和动画混合在一起，你不应该这样做

CSS中未定义动画关键帧

moveFromBottom

、

moveFromRight

等

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

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

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

---

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

CSS中未定义动画关键帧

moveFromBottom

、

moveFromRight

等

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

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

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

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