跳過第一個關鍵幀動畫

我正在使用api接收新數據的項目。我沒有HTML的控制權，我所能做的就是改變CSS。我正在使用@keyframes animation爲接收到的新數據組添加動畫。跳過第一個關鍵幀動畫

下面是簡單的CSS我使用

@keyframes newActivity{  
    to{ 
     position: absolute; 
     top: 18%; 
     left: 10%; 
     z-index: 1; 
     width:500px; 
     height:80%;  
    } 

} 
.apiData{ 
    animation-name:newActivity; 
    animation-duration:5s; 
}

我接收新的數據與類.apiData div元素。我的問題是，當頁面加載它獲取以前的數據與相同的div類，它也動畫它。

我想只動畫新數據，並防止舊數據在頁面重新加載時動畫。尋找一種方式來跳過第一個動畫加載頁面時

來源

2016-01-07 Akash Kumar

你想只針對一個DIV？這是你的問題嗎？ –

是一個單一的div，我收到同一班，不能改變HTML –

如果你只想要最後一個div是動畫，你可以做這樣的：

.apiData:last-child { 
animation-name:newActivity; 
animation-duration:5s; 
}

來源

2016-01-08 00:04:14

不錯的解決方案，但這樣做也會動畫我之前使用api收到的數據中的最後一個div在頁面重新加載 –

您將不得不添加更多那麼問題是，你如何加載div和多少個div具有相同的類？ –

我有一個js文件的api加載div並將它們放在我的文檔中。所有div都有相同的類無法區分它們。我已經有的div的數量在0 - 15之間 –

跳過第一個關鍵幀動畫

回答

相關問題