跳过第一个关键帧动画

Question

我正在开发一个使用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类的先前数据，并且它也会对其进行动画处理。

我想仅为新数据添加动画效果，并在页面重新加载时阻止旧数据动画化。寻找在页面加载时跳过第一个动画的方法

Answer 1

如果你想只为最后一个div做动画，你可以这样做：

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