Ошибка в CSS файле, связанная c rotate()

Всем привет!Я написал анимацию для кнопки, но при выполнении анимации с transform: rotate() кнопка двигается вправо, чего быть не должно.Я сделал 3 класса, которые включают в себя фрагменты анимации, которые я изменяю с помощью js:

let a = document.getElementById("bt")
let b = 0

function ok(){
    a.classList.add("button1")
    a.classList.remove("button")
    a.onclick = null
}

a.addEventListener("animationend", () => {
    b ++
    if(b == 2){
        a.classList.remove("button1")
        a.classList.add("button2")
    }
});

И вот, когда класс меняется на button2, то начинает выполняться следующий код:

.button2{
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: rgba(0, 0, 0, 0.192);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.199);
    font-size: 0px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    animation: an3 1s ease-in-out infinite;
}
.button2::after{
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-bottom-color: #ff7044;
}
@keyframes an3{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

И при этом кнопка конечно вращается, но она резко сдвигается вправо, что смотрится не очень.Когда я убираю строчки анимации, то всё работает исправно но не вращается.Надеюсь на вашу помощь.Заранее спасибо!