[分享]css不重复动画怎么写

当我们在制作网页时，经常需要使用一些动画效果来提升用户体验。但有时候我们希望动画只执行一次，而不是一直循环播放。这时，就需要使用 CSS 中的“不重复动画”了。不重复动画指的是在页面加载后只执行一次的...

当我们在制作网页时，经常需要使用一些动画效果来提升用户体验。但有时候我们希望动画只执行一次，而不是一直循环播放。这时，就需要使用 CSS 中的“不重复动画”了。

不重复动画指的是在页面加载后只执行一次的动画效果。这种动画通常会在用户进行某些操作后再次执行。

要实现不重复动画，我们可以使用以下几种方式：

1. 使用 animation-iteration-count 属性

这个属性控制动画的重复次数。默认值为 infinite，即无限循环，我们可以将它设为 1，来实现只执行一次的动画。

例如，下面的代码会让一个元素在页面加载后水平移动，只执行一次：

@keyframes move {
  0% { transform: translateX(0); }
  100% { transform: translateX(200px); }
}

#myElement {
  animation: move 2s;
  animation-iteration-count: 1;
} 

2. 使用 animation-fill-mode 属性

这个属性控制动画在执行前后的状态。默认值为 none，动画执行后元素会返回到原始状态。我们可以将它设为 forwards，来让元素保持在动画执行后的状态，从而实现只执行一次的动画。

例如，下面的代码会让一个元素在页面加载后缩小到原始尺寸，只执行一次：

@keyframes shrink {
  0% { transform: scale(1); }
  100% { transform: scale(0); }
}

#myElement {
  animation: shrink 2s forwards;
} 

这样，我们就可以轻松实现只执行一次的动画效果了。