@keyframes text text fade and shine

Question

Я пытаюсь кодировать этот эффект анимации текста (please see video), но я довольно далек от решения !!

Не могли бы вы помочь мне? возможно, лучше использовать js?

h1.fadeinone { animation: fadeinone 10s;} 
 
h1.fadeintwo { animation: fadeintwo 10s;} 
 
h1.fadeinthree { animation: fadeinthree 10s;} 
 

 
@keyframes fadeinone { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    33% { /* 3s for fade in */ 
 
    opacity: 1; 
 
    } 
 

 
} 
 

 
@keyframes fadeintwo { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 

 
    66% { /* 3s for fade in */ 
 
    opacity: 1; 
 
    } 
 
} 
 

 
@keyframes fadeinthree{ 
 
    0% { 
 
    opacity: 0; 
 
    } 
 

 
    100% { /* 3s for fade in */ 
 
    opacity: 1; 
 
    } 
 
} 
 

 
#claim h1 { 
 

 
font-size: 40px; 
 
line-height:40px; 
 
margin:0px; 
 
padding:0px; 
 
color:#FFF; 
 
} 
 

 
#claim {background-color:red;}

<div id="claim"> 
 
<h1 class="fadeinone">DESIGN</h1> 
 
<h1 class="fadeintwo">loren ipsum</h1> 
 
<h1 class="fadeinthree">DOLOR SIT</h1> 
 
</div>

Answer 1

Я думаю, что вы ищете animation-delay собственности. Это немного утомительно, потому что вам придется разделить каждую букву каждой строки на свой собственный элемент (в этом случае я использовал span), а затем вам придется вручную назначить каждую span свою собственную задержку, но эффект соответствует что вы предоставили.

Также, используя этот метод, вам нужен только один набор ключевых кадров, потому что вы будете использовать задержку, чтобы определить, когда начинается анимация, а не использовать процент за несколько анимаций.

div span 
 
{ 
 
    opacity: 0; 
 
    animation-name: fadein; 
 
    animation-duration: 3s; 
 
    animation-fill-mode:forwards; 
 
} 
 

 
div span:nth-child(1){animation-delay:0s} 
 
div span:nth-child(2){animation-delay:0.2s} 
 
div span:nth-child(3){animation-delay:0.4s} 
 
div span:nth-child(4){animation-delay:0.6s} 
 
div span:nth-child(5){animation-delay:0.8s} 
 
div span:nth-child(6){animation-delay:1s} 
 

 
@keyframes fadein 
 
{ 
 
    0%{opacity: 0} 
 
    100%{opacity:1} 
 
}

<div> 
 
    <span>D</span><span>E</span><span>S</span><span>I</span><span>G</span><span>N</span> 
 
</div>

Конечно, вы могли бы сделать это с помощью JavaScript, и решение, вероятно, будет более изящным и проще изменить; однако, вы должны иметь дело с проблемами совместимости. По возможности вам лучше будет придерживаться строгих CSS.