将文本背景剪辑应用于父对象会导致子元素上的动画出现问题

Question

在

的情况下，子元素的动画存在问题

-webkit-background-clip: text 

用于父级。该动画似乎可以正常运行，但仅显示初始状态和最终状态。

是否可以为这样的元素设置动画？

DEMO

.text{
  background: linear-gradient(to right, #000000, #FFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  font-size: 40px;
  font-weight: bold;
  font-family: arial, sans-serif;
  
  &:hover{
    span{
      opacity: 0.5;
    }
  }
  
  span{
    opacity:  1;
    transition: opacity 0.3s;
    
    @for $i from 1 through 8 {
      &:nth-child(#{$i}) {
        transition-delay: #{$i*0.1}s;
      }
    }
  }
}

<div class="text">
  <span>Hover</span> 
  <span>on</span> 
  <span>me.</span> 
  <span>Lorem</span> 
  <span>ipsum</span> 
  <span>dolor</span> 
  <span>sit</span> 
  <span>amet</span> 
</div>
<div>
If you select above text, you'll see that the animation is working.
</div>