Применение текстового фонового клипа к родительскому элементу вызывает проблемы с анимацией дочерних элементов. - PullRequest
Новая
       8

Применение текстового фонового клипа к родительскому элементу вызывает проблемы с анимацией дочерних элементов.

0 голосов
/ 06 сентября 2018

У меня проблема с анимацией дочерних элементов в случае, когда 

-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>
...