Как сделать анимацию тегу span?

Question

Есть следующая ссылка. Нужно сделать так, чтобы зоной клика являлась вся строка AUTHOR: blnk.off, но при этом, чтобы при наведении менялся только blnk.off.

HTML

<footer>
           <div class="scroll scroll-up">
               <img src="img/icons/arrow-up.svg" alt="" class="arrow-up arrow" draggable="false">
           </div>
           <a href="" class="author" target="_blank">AUTHOR: <span class="nickname">BLNK.OFF</span></a>
</footer>

CSS

.author {
    @extend %KharkivTone;
    letter-spacing: 0.2em;
    color: #B1830D;
    text-shadow: 0px 5px 4px rgba(251, 72, 255, 0.25);
    -webkit-text-stroke: 0.3px #0047FF;
    justify-self: center;

    transition: color 300ms;

    &:hover {
      .nickname {
        color: #FFB803;
      }
    }
  }

Почему-то если сделать изменение цвета для всей строки, то переход осуществляется, но если же сделать так, как описано в коде, то есть только для .nickname, то плавной анимации не осуществляется. В чем проблема?

Answer 1

transition не наследуется дочерними элементами, следовательно данное правило нужно прописать для .nickname тоже.

Для этого можно воспользоваться записью transition: inherit, что позволит .nickname использовать такое же значение transition как у .author.

.author {
  letter-spacing: 0.2em;
  color: #B1830D;
  text-shadow: 0px 5px 4px rgba(251, 72, 255, 0.25);
  -webkit-text-stroke: 0.3px #0047FF;
  justify-self: center;
  transition: color 300ms;
}

.author .nickname {
  transition: inherit;
}

.author:hover .nickname {
  color: #FFB803;
}

<a href="#" class="author" target="_blank">AUTHOR: <span class="nickname">BLNK.OFF</span></a>

БЛОГ НА HUSL

Как сделать анимацию тегу span?

Ответы (1 шт):