Firefox转换属性不起作用

Question

我的“ transition-property：background ”问题在Firefox上有悬停效果。使用-webkit-在chrome和safari上运行得很好，但似乎-moz-没有任何效果。看看过渡属性的功能，说firefox应该支持。有什么想法或建议吗？

http://codepen.io/WeebleWobb/pen/qaRxdO?editors=1100

HTML

  <div id="symptoms-ed">
    <div class="symptoms-container">
      <p class="sign-hide">“A lot of people fell asleep during lectures”</p>
      <p class="sign-show">“But I fell asleep during exams”</p>
    </div>
  </div>

CSS

/*-------------------------- Our Signs ------------------------------*/
.symptoms-container {
    position: absolute;
    bottom: 10px;
    right: 15px;
    width: 94%;
    overflow: hidden;
    color: #fff;
    font-family: sans-serif;
}
#symptoms-ed {
    position: relative;
    background: url("http://livingnarcolepsy.com/wp-content/uploads/2016/08/eds.jpg") center center no-repeat;
    -webkit-transition-property: background;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-backface-visibility: hidden;
    -moz-transition-property: background;
    -moz-transition-duration: 1s;
    -moz-transition-timing-function: ease-in-out;
    -moz-backface-visibility: hidden;
    background-size: cover;
    width: 500px;
    height: 500px;
}
#symptoms-ed:hover {
   background: url("http://livingnarcolepsy.com/wp-content/uploads/2016/08/eds-hover.jpg") center center no-repeat;
   background-size: cover;
}

/*---------------- Our Signs Copy Hover Function -----------------*/
#symptoms-ed .sign-show {
    display: none;
}
#symptoms-ed:hover .sign-show {
    display: block;
}
#symptoms-ed:hover .sign-hide {
    display:none;
}