Анимация при загрузке страницы выполняется второй раз при отпускании мыши - PullRequest
Новая
       8

Анимация при загрузке страницы выполняется второй раз при отпускании мыши

0 голосов
/ 05 марта 2019

Я использую изображение и три пролета как братьев и сестер в оболочке (.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>

1 Ответ

1 голос
/ 05 марта 2019

Ваше наведение сбрасывает базовую анимацию.Затем, когда вы откроете его, он снова будет отменен, поэтому он воспроизводится снова.

Вместо этого при наведении курсора добавьте новую анимацию поверх предыдущей.Это сделает анимацию не сбрасываемой, и тот, кто ее не задействует,

Alos, вы можете забыть о префиксах веб-набора. 

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