css3 webkit动画在div上停止:悬停

在CSS3中，可以使用Webkit动画来创建悬停效果。Webkit动画是一种CSS动画技术，它允许您在悬停时停止动画。以下是一个简单的示例，说明如何在div上实现悬停效果：

首先，创建一个HTML文件，并在其中添加一个div元素：

<!DOCTYPE html>
<html>
<head><style>
  div {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation: myAnimation 2s infinite;
    animation-play-state: paused;
  }

  div:hover {
    animation-play-state: running;
  }

  @keyframes myAnimation {
    0% {background-color: blue;}
    50% {background-color: red;}
    100% {background-color: blue;}
  }
</style>
</head>
<body>

<div></div>

</body>
</html>

在这个示例中，我们创建了一个div元素，并为其设置了一个背景颜色。然后，我们使用CSS3的Webkit动画来创建一个名为“myAnimation”的动画。该动画将在2秒内运行，并且将无限循环。

我们还将动画的初始状态设置为“暂停”，这意味着在默认情况下，动画将不会运行。然后，我们使用“div:hover”选择器来定义当鼠标悬停在div上时的样式。在这种情况下，我们将动画的状态更改为“运行”，这将使动画开始播放。

这个示例演示了如何在div上使用Webkit动画来创建悬停效果。您可以根据需要修改动画和样式，以适应您的需求。