html - 悬停时的关键帧动画

Question

我一直在关注 CSS 关键帧动画的示例，代码如下:-

.pulse-animation {
  margin: 50px;
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ff8717;
  cursor: pointer;
  animation: pulse 2s infinite;
  float: left;
}

.pulse-animation:hover {
  animation: none;
}

@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 30px rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 30px rgba(204, 169, 44, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}

<span class="pulse-animation"></span>
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/1.jpg" />
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/2.jpg" />
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/3.jpg" />
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/4.jpg" />

我尝试让动画仅适用于悬停但它没有用，我也尝试更改悬停动画但它仍然不起作用所以任何人都可以提供帮助。

Answer 1

:hover 是您将鼠标悬停在该元素上方时的状态。当您不悬停时，您不希望有动画，因此您将 animation: none; 设置为默认状态 .pulse-animation。如果您将鼠标悬停在类 .pulse-animation 上，那么您将设置 animation: pulse 2s infinite;

看下面的例子

.pulse-animation {
  margin: 50px;
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ff8717;
  cursor: pointer;
  animation: none;
  float: left;
}

.pulse-animation:hover {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 30px rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 30px rgba(204, 169, 44, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}

<span class="pulse-animation"></span>
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/1.jpg" />
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/2.jpg" />
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/3.jpg" />
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/4.jpg" />