css动画学习网站

CSS动画是网页设计中不可或缺的元素，为网页增加了生动的效果。但是，有时候我们希望CSS动画能够延迟一段时间后再播放，或者是只播放一定的次数。这就需要使用CSS中的delay和iteration-count属性。

delay属性定义了动画延迟播放的时间。比如，我们希望一个动画在页面加载完毕后延迟2秒才开始播放，可以如下设置：

animation-delay: 2s;

iteration-count属性则定义了动画播放次数。比如，我们希望一个动画只播放一次，可以如下设置：

animation-iteration-count: 1;

同时，iteration-count属性还可以接收infinite参数，表示动画无限循环播放：

animation-iteration-count: infinite;

除此之外，我们还可以通过组合使用delay和iteration-count属性，实现更精细的动画效果。比如，下面的代码表示一个动画在页面加载完毕后延迟2秒开始播放，并且只播放一次：

animation: my-animation 1s ease-in-out 2s 1 forwards;
animation-iteration-count: 1;

这里的animation属性定义了动画的关键帧、持续时间、缓动函数、延迟播放时间和播放方向，forwards表示最后一帧保留在屏幕上，直到动画结束。

总之，CSS动画的delay和iteration-count属性为网页设计师提供了更多的动画控制方式，灵活运用可以为网页增色不少。