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" />

Answer 2

如果您希望它仅在悬停时工作，请从.pulse-animation移除动画并将动画添加到:hover，如下所示：

.pulse-animation {
  margin: 50px;
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ff8717;
  cursor: pointer;
  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);
  }
}

Answer 3

如果你想在：hover-element上使用动画，你应该为：hover-element应用动画。

.pulse-animation {
  margin: 50px;
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ff8717;
  cursor: pointer;
 
  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" />

Answer 4

这里你要删除.pulse-animation或animation：none;上的动画。 on .pulse-animation并在悬停.pulse-animation上添加相同的属性：hover {}

.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);
  }
}

<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" />

悬停时的关键帧动画

4 个答案: