Как мне остановить @keyframes от изменения положения элементов? - PullRequest
Новая
       18

Как мне остановить @keyframes от изменения положения элементов?

0 голосов
/ 17 июня 2019

Я использую пользовательскую панель CSS в Wordpress для анимации маркеров на интерактивной карте.

Я могу успешно использовать @keyframe для анимации маркеров, но когда я это делаю, он переносит позицию элемента в верхний левый угол экрана.

Я пытался установить абсолютное положение элемента, но это не сработало.

Я также пытался вручную определить положение элемента, который БУДЕТ работать, но отрицательно влияет на отзывчивость на других устройствах / разрешениях экрана. 

#marker_4 {
width: 3rem;
animation: breathing 5s ease-in-out infinite;
}

@-webkit-keyframes breathing {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }

  25% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  60% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

@keyframes breathing {
  0% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }

  25% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  60% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }
}
...