Анимированные элементы с непрозрачностью - PullRequest
0 голосов
/ 12 апреля 2020

Существует такой 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;
}

Вот результат: Result Когда я попробуйте анимировать отдельные буквы, используя непрозрачность (применяя анимацию к классу .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;}

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

Как исправить этот эффект?

Я также пытался анимировать с изменением тени текста, но браузеру трудно справиться с этим эффектом, и анимация имеет низкий FPS:

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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...