代码之家 › 专栏 › 技术社区 › Daniel Sixl

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

css-animations

Daniel Sixl · 技术社区 · 7 年前

我在包装器中使用一个图像和三个跨距作为同级( .avatar ),显示一个小化身。我添加了两个动画。动画元素是跨度。它们的动画有一个小的延迟。

@keyframes rings-load ). 另一个( @keyframes rings-hover )执行,当 .阿凡达 已悬停。

问题: 悬停后 .阿凡达 ,离开元素时,将再次触发初始动画。为什么?预防这种行为的最佳做法是什么?

预期: 动画 rings-load 在页面加载时执行一次,不再执行。动画 rings-hover .阿凡达

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

0 回复 | 直到 7 年前

vals 7 年前

悬停将重置基础动画。然后,当您取消播放时,它会再次应用,因此它会再次播放。

相反,在悬停时,在上一个动画的基础上添加新动画。这将使动画不会被重置,并且取消覆盖不会触发它

还有,你可以忘记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>