页面加载动画在鼠标离开时第二次执行

Question

我使用一个图像和三个跨度作为包装器 (.avatar) 中的兄弟姐妹，以显示一个小头像。我添加了两个动画。动画元素是跨度。它们的动画会稍有延迟。

立即执行一个动画 (@keyframes rings-load)。当悬停.avatar 时，另一个 (@keyframes rings-hover) 执行。

问题： 悬停.avatar，离开元素后，第二次触发初始动画。这是为什么？防止这种行为的最佳做法是什么？

预期：动画rings-load 在页面加载时执行一次，不会再次执行。动画rings-hover 在每次悬停在类.avatar 的元素上时执行一次。

/* vars */

:root {
  --avatar-size: 140px;
}

/* general */

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background: #333;
  margin: 0;
  padding: 0;
}

main {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-content: center;
  height: 100vh;
}

/* avatar */

.avatar-container {
  margin: 2rem;
  padding: 21px;
}

.avatar img {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 100%;
  padding: 2px;
  cursor: pointer;
}

.avatar span {
  border-radius: 100%;
  position: absolute;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border: 1px solid #ffffffee;
  background: #333;
  z-index: -1;
  opacity: 0;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-animation: rings-load 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
          animation: rings-load 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}

.avatar span:nth-child(2) {
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}

.avatar span:nth-child(3) {
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
}

.avatar:hover span {
  -webkit-animation: rings-hover 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
          animation: rings-hover 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}

.avatar:hover span:nth-child(2) {
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}

.avatar:hover span:nth-child(3) {
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
}

/* animations */

@-webkit-keyframes rings-load {
  75% {
    opacity: 1;
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

@keyframes rings-load {
  75% {
    opacity: 1;
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

@-webkit-keyframes rings-hover {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes rings-hover {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

<main>

  <div class="avatar-container">
    <div class="avatar">
      <span></span>
      <span></span>
      <span></span>
      <img src="https://picsum.photos/140/140/?17" alt="Avatar Books" />
    </div>
  </div>

</main>

Answer 1

您的悬停会重置基本动画。然后，当你取消悬停时，它会再次应用，所以它会再次播放。

相反，在悬停时将新动画添加到前一个动画之上。这将使动画不会被重置，并且 unhover 不会触发它

另外，您可以忘记 webkit 前缀。

/* vars */

:root {
  --avatar-size: 140px;
}

/* general */

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background: #333;
  margin: 0;
  padding: 0;
}

main {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-content: center;
  height: 100vh;
}

/* avatar */

.avatar-container {
  margin: 2rem;
  padding: 21px;
}

.avatar img {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 100%;
  padding: 2px;
  cursor: pointer;
}

.avatar span {
  border-radius: 100%;
  position: absolute;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border: 1px solid #ffffffee;
  background: #333;
  z-index: -1;
  opacity: 0;
  transform: scale(1);
  animation: rings-load 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-iteration-count: 1;
}

.avatar span:nth-child(2) {
          animation-delay: 200ms;
}

.avatar span:nth-child(3) {
          animation-delay: 300ms;
}

.avatar:hover span {
    animation: rings-load 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
       rings-hover 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1;
}

.avatar:hover span:nth-child(2) {
          animation-delay: 200ms;
}

.avatar:hover span:nth-child(3) {
          animation-delay: 300ms;
}

/* animations */

@-webkit-keyframes rings-load {
  75% {
    opacity: 1;
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

@keyframes rings-load {
  75% {
    opacity: 1;
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

@-webkit-keyframes rings-hover {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes rings-hover {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

<main>

  <div class="avatar-container">
    <div class="avatar">
      <span></span>
      <span></span>
      <span></span>
      <img src="https://picsum.photos/140/140/?17" alt="Avatar Books" />
    </div>
  </div>

</main>