css - 跳过第一个关键帧动画

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;
}