CSS 鼠标悬停时暂停 WebKit 动画

在本文中，我们将介绍如何使用CSS来实现在鼠标悬停时暂停WebKit动画的效果。

阅读更多：CSS 教程

什么是WebKit动画？

WebKit动画是使用CSS和JavaScript实现的动画效果。它使用了WebKit引擎，可以在Web浏览器中创建各种各样的动画效果，包括过渡、旋转、缩放和淡入淡出等。

如何创建一个WebKit动画？

首先，我们需要定义一个类来描述动画的行为和样式。可以使用@keyframes规则来定义动画的关键帧，以便在指定的时间间隔内改变元素的属性。

@keyframes myAnimation {
  0% { transform: scale(1); }
  50% { transform: scale(2); }
  100% { transform: scale(1); }
}

以上代码定义了一个名为“myAnimation”的动画，它在0%、50%和100%的时间点分别将元素的缩放比例设置为1、2和1。接下来，我们可以将这个动画应用于一个元素。

.myElement {
  animation: myAnimation 2s infinite;
}

以上代码将“myAnimation”动画应用于类为“myElement”的元素。其中，动画的持续时间为2秒，并且会无限循环播放。

如何在鼠标悬停时暂停动画？

默认情况下，CSS动画是连续播放的，没有停止或暂停的功能。要实现鼠标悬停时暂停动画的效果，我们可以使用:hover伪类选择器。

.myElement:hover {
  animation-play-state: paused;
}

以上代码将在鼠标悬停时将动画的播放状态设置为暂停。

以下是一个完整的示例，演示了如何创建一个在鼠标悬停时暂停的WebKit动画：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    @keyframes myAnimation {
      0% { transform: scale(1); }
      50% { transform: scale(2); }
      100% { transform: scale(1); }
    }

    .myElement {
      width: 100px;
      height: 100px;
      background-color: red;
      animation: myAnimation 2s infinite;
    }

    .myElement:hover {
      animation-play-state: paused;
    }
  </style>
</head>
<body>
  <div class="myElement"></div>
</body>
</html>

在上面的示例中，一个名为“myElement”的红色正方形会不断缩放，但是当鼠标悬停在它上面时，动画会暂停。