Пользовательская анимация с использованием ключевых кадров не работает в Safari

Question

На одной странице у меня есть кнопка с пользовательской анимацией, которая опирается на следующий процесс:

1. При нажатии кнопки javascript препятствует отправке пользователя на новую страницу,добавляет имя класса "animate" к кнопке и заставляет страницу ждать 2 секунды;
2. Селектор CSS "animate" вызовет анимации ключевых кадров, называемые "bottomBubbles" или "topBubbles";
3. topBubbles или bottomBubbles затем устанавливают правила background-position и background-size для имитации «взрыва графики» в течение 2 секунд;и затем, наконец,
4. javascript прекращает ожидание и инициирует перенаправление на ссылку, на которую должен быть отправлен пользователь.

Начиная с вышеизложенного, все шаги в Safari работают, кроме # 3.

@-webkit-keyframes topBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
  }
  50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
  }
  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
  }
}

https://jsfiddle.net/wLvb9n0f/

Я исследовал это, и пока единственное, что я обнаружил, это то, что для Safari требуется использовать весь процент, и я уже делаю это. Как я могу заставить эту анимацию работать в Safari?