Как ограничить Bootstrap анимации поповера для родителя

Question

Я пытаюсь оживить сайт поповерами, которые вызывают ошибки. Я воссоздал проблему, с которой сталкиваюсь, с помощью простого codepen

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" 
    title="Popover title" data-content="And here's some amazing content. It's very 
    engaging. Right?">Click to toggle popover</button>

.popover {
  border-radius: 10px;
  border: 1px solid white;
  transform: scale(1);
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.95);
  }
}

Когда всплывающие окна запускаются без анимации, они заполняются там, где я хочу. Однако после добавления анимации всплывающие окна перемещаются в верхний левый угол (0, 0) окна.

Это как-то связано с динамическим добавлением всплывающих окон? Когда я проверяю dev tools, скрипты для заполнения поповера находятся под моими тегами непосредственно перед закрывающим тегом.

Я пытался t ie всплывающее окно для указания c элементов, используя параметр 'container:' element '' в jQuery. Я в недоумении здесь. Как держать поповер рядом с кнопкой, которая его сработала, и анимацию на ручке выше. Если кто-то может пролить свет на эту проблему для меня, я могу применить ее к приложению, которое я разрабатываю.

Я уже думал об указании местоположения элемента Dynami c в CSS, но это не идеально. Это приложение должно быть отзывчивым. Я думаю, что я мог бы сделать медиа-запросы для разрешения точек останова до t ie местоположения этих элементов, но это будет боль.

Заранее спасибо.