Плавное смешивание анимации при наведении - PullRequest
Новая
       9

Плавное смешивание анимации при наведении

2 голосов
/ 07 марта 2019

У меня есть две анимации, одна из них - анимация по умолчанию, которая вращает div на z axis, и когда вы наводите курсор мыши на div, я также увеличиваю и уменьшаю его.

Есть лиспособ для меня, чтобы оживить между двумя анимациями?В настоящее время, если анимация находится на полпути, и я наведите курсор мыши на элемент div, она применяет новую анимацию с самого начала, и это выглядит странно.Я хотел бы, чтобы он плавно переходил между анимациями, это возможно? 

.chest {
  height: 64px;
  width: 64px;
  background: yellow;
  animation: rocking-chest 2s linear infinite;
  
  margin-left: 50px;
  margin-top: 50px;
}

.chest:hover {
  animation: rocking-pulse-chest 1s linear infinite;
}

@keyframes rocking-chest {
  0% {
    transform: rotateZ(-20deg);
  }

  50% {
    transform: rotateZ(20deg);
  }

  100% {
    transform: rotateZ(-20deg);
  }
}

@keyframes rocking-pulse-chest {
  0% {
    transform: rotateZ(-20deg) scale(1);
  }

  50% {
    transform: rotateZ(20deg) scale(1.5);
  }

  100% {
    transform: rotateZ(-20deg) scale(1);
  }
}
<div class="chest"></div>

Ответы [ 2 ]

2 голосов
/ 07 марта 2019

Как насчет разделения анимации масштабирования на внешний элемент, в то время как внутренний элемент выполняет вращение: 

.chest {
  height: 64px;
  width: 64px;
  margin-left: 50px;
  margin-top: 50px;
}

.chest-inner {
  width: 100%;
  height: 100%;
  background: yellow;
  animation: rocking-chest 2s linear infinite;
}

.chest:hover {
  animation: scale-animation 1s linear infinite;
}

@keyframes rocking-chest {
  0% {
    transform: rotateZ(-20deg);
  }
  50% {
    transform: rotateZ(20deg);
  }
  100% {
    transform: rotateZ(-20deg);
  }
}

@keyframes scale-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
<div class="chest">
  <div class="chest-inner"></div>
</div>
1 голос
/ 07 марта 2019

Вы можете анимировать ширину / высоту вместо масштаба, и вы сможете иметь несколько анимаций, которыми вы можете легко управлять. Конечно, вы не будете иметь такой же эффект, как при использовании масштаба. 

.chest {
  height: 64px;
  width: 64px;
  animation:
    rocking-pulse-chest 1s linear infinite paused,
    rocking-chest 2s linear infinite;
  margin-left: 50px;
  margin-top: 50px;
  background: yellow;
}

.chest:hover {
  animation-play-state:running ;
}

@keyframes rocking-chest {
  0%,100% {
    transform: rotateZ(-20deg);
  }

  50% {
    transform: rotateZ(20deg);
  }
}

@keyframes rocking-pulse-chest {
  50% {
    width:calc(64px * 1.5);
    height:calc(64px * 1.5);
    margin-left: calc(50px/1.5);
    margin-top: calc(50px/1.5);
  }

}
<div class="chest"></div>
...