css | scss iç içe transition kullanım sorunu

merhaba arkadaşlar,

<a href="#" class="btn btn-outline-warning px-2">Profili görüntüle <i class="fa-solid fa-angles-right ms-1"></i></a>

a {
    align-self: flex-end;
    padding: 3px 8px;
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    box-shadow: $shadow-sm;
    transition: .5s all;
    i {
        transition: .4s all;
    }
    &:hover {
        color: $white;
        i {
            transform: rotateX(180deg) rotateY(180deg);
        }
    }
}

şu şekilde bir yapım var. "<b>a</b>" etiketi hover olunca a etiketinin rengini değiştiriyorum. geçişli olması için transition kullandım. a hover olunca da içerisinde ki "<b>i</b>" etiketinede transform işlemi uyguluyorum. i etiketinin kendisine de transition verince bir gecikme oluyor a etiketinde de transition olduğu için bunu benmi yanlış kullanıyorum yoksa bir çözümü var mı?