Как я могу Fini sh Infinite css перевести цикл анимации: плавно навести go обратно в исходное положение? - PullRequest
Новая
       2

Как я могу Fini sh Infinite css перевести цикл анимации: плавно навести go обратно в исходное положение?

0 голосов
/ 13 июля 2020

Я хочу, чтобы фигуры поменялись местами: наведите курсор и начните немного покачиваться (как кристаллы magi c). Без подпрыгивания плавно переходит на новое место и с легкостью возвращается. При покачивании, если вы возьмете мышь на панели, она переместится в исходное место без анимации. Я попытался поиграть с настройками css, и я попробовал js, затем u «при наведении» создать класс для добавления на панель с анимацией качания и удалить этот класс после, но были сбои из-за бесконечности анимации качания. 

//original position (0,0)

 &:hover {
    #second {
      transform: translate(70%, -70%);
      animation: bob 2s ease 1s infinite alternate;
    }
}

@keyframes bob {  
  0% {transform: translate(70%, -70%); } 
  100% {transform: translate(70%, -50%); } 
}

Codepen: https://codepen.io/MakeGood_code/pen/ExPpwWJ (PS, если у вас есть критика кода, пожалуйста, будьте моим гостем)

...