CSS动画在Firefox和JSFiddle中不起作用

Question

我有一个奇怪的问题 - 这段代码在Firefox中的工具提示中不会消失。

这是我的代码： http://jsfiddle.net/2VsTp/11/

CSS

@-webkit-keyframes showTooltip {
    from {opacity: 0;}
    to {opacity: 1;}
}

@-moz-keyframes showTooltip {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes showTooltip {
    from {opacity: 0;}
    to {opacity: 1;}
}

.form-item {position: relative;}

.message-error:after {
    content: attr(data-tooltip);
    position: absolute;
    top: 0;
    left: 10%;
    display: none;
    padding: 1em 2em;
    color: white;
    -webkit-animation: showTooltip 0.35s ease-in-out; 
    -moz-animation: showTooltip 0.35s ease-in-out;
    animation: showTooltip 0.35s ease-in-out;
}

.message-error:hover:after {
    display: block;
}

.message-error:after {background-color: red;}

提前感谢您的提示！

Answer 1

将动画从 .message-error：after 移至 .message-error：hover：after

.message-error:hover:after {
    display: block;
     -webkit-animation: showTooltip 0.35s ease-in-out; 
    -moz-animation: showTooltip 0.35s ease-in-out;
    animation: showTooltip 0.35s ease-in-out;
}

http://jsfiddle.net/rooseve/2VsTp/14/

但我不确定为什么消息错误：适用于Chrome。