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/

但是我不确定为什么出现message-error：after适用于Chrome。