CSS 暂停属性

在本文中，我们将介绍 CSS 中的暂停属性。

阅读更多：CSS 教程

什么是暂停属性？

当我们使用 CSS 来构建网页时，有时我们希望在特定的情况下暂停某些元素的动画或过渡效果。这是 CSS 中的暂停属性派上用场的时候。暂停属性用于控制元素动画或过渡的播放状态，可以使其暂停或恢复播放。

CSS 暂停属性有两种：animation-play-state（动画播放状态）和 transition-play-state（过渡播放状态）。

animation-play-state

animation-play-state 属性用于控制动画的播放状态。该属性有两个可能的值：paused（暂停）和 running（运行）。

让我们看一个使用 animation-play-state 属性的示例：

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: rotate;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.pause-animation {
  animation-play-state: paused;
}

在上面的示例中，我们定义了一个旋转动画 rotate，然后将它应用于一个 div 元素。该动画会使 div 按照每秒一圈的速度无限循环旋转。接下来，我们添加了一个类 .pause-animation，它的 animation-play-state 属性被设置为 paused。当我们在页面中使用这个类时，动画将被暂停。

transition-play-state

transition-play-state 属性用于控制过渡的播放状态。和 animation-play-state 类似，它也有两个可能的值：paused（暂停）和 running（运行）。

下面是一个使用 transition-play-state 属性的示例：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition-property: width;
  transition-duration: 1s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

.pause-transition {
  transition-play-state: paused;
}

在上面的示例中，我们定义了一个宽度过渡效果，并将其应用于一个 div 元素。该过渡效果会使 div 的宽度在 1 秒内从 0 变为 100 像素。然后，我们添加了一个类 .pause-transition，它的 transition-play-state 属性被设置为 paused。当我们在页面中使用这个类时，过渡效果将被暂停。