同一個CSS動畫的不同動畫持續時間

Question

我試圖讓所有使用相同的CSS動畫（閃爍）的文本具有多個div，但它們應該以不同的速率閃爍。比方說，我希望第一個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

，而你說（多個div）你可以使用：對於div的第n個孩子（N）像

.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>