Анимирование элементов с помощью opacity

Question

Есть вот такой HTML-код:

<p class="logo">m<span class="blink">y</span>Po<span class="blink">r</span>tf<span class="blink">o</span>lio</p>

Вот его стилизация:

.logo {
  position: relative;
  cursor: default;
  font: 400 4em 'flottflottregular';
  color: #fee;
  text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #ffff00, 0 0 0.5em #ffff00, 0 0 0.1em #ffff00, 0 15px 5px #000;
}

Вот результат:

Когда я пытаюсь анимировать отдельные буквы с помощью opacity(применяя анимацию к классу .blink):

0%    {opacity: 1;}
3%    {opacity: 0.4;}
6%    {opacity: 1;}
7%    {opacity: 0.4;}
8%    {opacity: 1;}
9%    {opacity: 0.4;}
10%   {opacity: 1;}
89%   {opacity: 1;}
90%   {opacity: 0.4;}
100%  {opacity: 0.4;}

то получается, что анимированные элементы имеют более насыщеную тень по сравнению с другими буквами:

Как исправить данный эффект?

P.S Анимация с отключением теней

78% {
    color: inherit;
    text-shadow: inherit;
}
79% {
    color: #333;
}
80% {
    text-shadow: none;
}
81% {
    color: inherit;
    text-shadow: inherit;
}
82% {
    color: #333;
    text-shadow: none;
}
83% {
    color: inherit;
    text-shadow: inherit;
}
92% {
    color: #333;
    text-shadow: none;
}
92.5% {
    color: inherit;
    text-shadow: inherit;
}

Answer 1

Проблема именно в span.blink, его text-shadow накладываются поверх текста, из-за чего текст вне span.blink чуть "мутнеет".

Решение, глупое, но имеет место быть:
Взять пипеткой цвет текста, не того что в span.blink - в вашем случае более менее подходящий цвет - #ffeed4, его мы и выдадим span.blink.

Результат:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: 100vh;
  background: #333;
  margin: 0;
}

.logo {
  position: relative;
  cursor: default;
  font: 400 4em 'flottflottregular';
  color: #fee;
  text-shadow: 
    0 -40px 100px,
    0 0 2px,
    0 0 1em #ff0,
    0 0 0.5em #ff0,
    0 0 0.1em #ff0,
    0 15px 5px #000;
}

.logo > .blink {
  animation: blink 3s linear infinite;
  color: #ffeed4; /* Чуть более приблежённый */
}

@keyframes blink {
  0%,6%,8%,10%,89%  {opacity: 1;}
  3%,7%,9%,90%,100% {opacity: .4;}
}

<p class="logo">m<span class="blink">y</span>Po<span class="blink">r</span>tf<span class="blink">o</span>lio</p>

БЛОГ НА HUSL

Анимирование элементов с помощью opacity

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