Различные продолжительности анимации для одной и той же анимации CSS

Question

Я пытаюсь иметь несколько div с текстом, которые используют одну и ту же анимацию CSS (мигает), но все они должны мигать с разной скоростью. Скажем, я хочу, чтобы первый div мигал один раз каждые 2 секунды, а второй div мигал один раз каждые 4 секунды.

Есть ли способ сделать это?

Вот мой код:

.blink { 
 
    animation-duration: 2s; 
 
    /*this is what i'm trying to change*/ 
 
    animation-name: blink; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: alternate; 
 
    animation-timing-function: ease-in-out; 
 
} 
 
@keyframes blink { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    50% { 
 
    opacity: 1; 
 
    } 
 
    51% { 
 
    opacity: 0.1; 
 
    } 
 
    100% { 
 
    opacity: 0.1 
 
    } 
 
}

<div class="blink">hello</div> 
 
<div class="blink">explosion</div>

Answer 1

с использованием: первого ребенка и: последний ребенок, которого вы можете контролировать анимацию-продолжительность каждого из них

.blink:first-child { 
animation-duration: 0.5s; /*this is what i'm trying to change*/ 
animation-name: blink; 
animation-iteration-count: infinite; 
animation-direction: alternate; 
animation-timing-function: ease-in-out; 
} 
.blink:last-child { 
animation-duration: 1s; /*this is what i'm trying to change*/ 
animation-name: blink; 
animation-iteration-count: infinite; 
animation-direction: alternate; 
animation-timing-function: ease-in-out; 
} 

@keyframes blink { 
    0% { 
     opacity: 1; 
    } 
    50% { 
     opacity: 1; 
    } 
    51% { 
     opacity: 0.1; 
    } 
    100% { 
     opacity: 0.1 
    } 
} 

Demo

или же то же самое

.blink{ 
animation-name: blink; 
animation-iteration-count: infinite; 
animation-direction: alternate; 
animation-timing-function: ease-in-out; 
} 
.blink:first-child { 
animation-duration: 0.5s; /*this is what i'm trying to change*/ 
} 
.blink:last-child { 
animation-duration: 1s; /*this is what i'm trying to change*/ 
} 

@keyframes blink { 
    0% { 
     opacity: 1; 
    } 
    50% { 
     opacity: 1; 
    } 
    51% { 
     opacity: 0.1; 
    } 
    100% { 
     opacity: 0.1 
    } 
} 

Demo

в то время как вы сказали (несколько дивы) вы можете использовать: п-го ребенка (п) для дивы, как

.blink:nth-child(1) { // for first div 
.blink:nth-child(2) { // for second div 
.... so on 

Answer 2

Один из способов сделать это, чтобы расколоть продолжительность в свой класс и использование нескольких классов в HTML (с .blink в качестве основного класса):

.blink { 
 
    animation-name: blink; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: alternate; 
 
    animation-timing-function: ease-in-out; 
 
} 
 
.blink-1s { 
 
    animation-duration: 1s; 
 
} 
 
.blink-2s { 
 
    animation-duration: 2s; 
 
} 
 
.blink-3s { 
 
    animation-duration: 3s; 
 
} 
 

 
@keyframes blink { 
 
    0% { 
 
     opacity: 1; 
 
    } 
 
    50% { 
 
     opacity: 1; 
 
    } 
 
    51% { 
 
     opacity: 0.1; 
 
    } 
 
    100% { 
 
     opacity: 0.1 
 
    } 
 
}

<div class="blink blink-1s">one second</div> 
 
<div class="blink blink-2s">two seconds</div> 
 
<div class="blink blink-3s">three seconds</div>