Есть вот такой 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;
}