Firefox与Chrome淡入淡出动画

Question

我已经使用CSS为我的网站添加了标签，并根据此演示：

http://www.onextrapixel.com/examples/pure-css-tab-with-fade-animation/index4.html

然而，chrome和firefox在动画方面表现不同。 一旦你重新访问一个标签，firefox就不会再次播放淡入动画 - 铬就是这样。 我如何告诉firefox再次播放动画？

JSFIDDLE：http://jsfiddle.net/h5W33/

重要部分：

.tabs label {
    display: block;
    padding: 10px 20px;
    cursor: pointer;
    position: relative;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

[id^=tab]:checked ~ [id^=tab-content], [id^=tab]:checked ~ [id^=tab-content] > div {
    display: block;
}