Question

我在包装器（.avatar）中使用一幅图像和三个跨度作为兄弟姐妹，以显示一个小头像。我添加了两个动画。动画元素是跨度。它们的动画播放时延很小。

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

问题：将鼠标悬停在.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

您的鼠标悬停将重置基本动画。然后，当您将鼠标悬停时，它会再次出现，因此它会再次播放。

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

Alos，您可以忘记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>

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

1 个答案: