Непонятные увеличение ширины + преждевременное изменение высоты при анимации

Добрый день! Недавно начал изучать HTML+CSS в Юдеми. Вопрос следующий. Есть один из блоков:

.block4 {
    width:150px;
    height:150px;
    background:blue;
    animation: blabla 7s infinite;
}
@keyframes blabla {
    
    0% {
        border-radius:0%;
    }
    40% {
        border-radius:100%;
    }
    60% {
        background:green;
        border-radius:20px 0% 20px 0%;
    }
    99% {
        background:orange;
        border-radius:0%;
        border: 3px solid;
    }
    100% {
       height:100px;
    }
}

Вопросы следующие: 1) Почему высота начинает у блока меняться сразу, а не в самую последнюю очередь. Я даже для этого сделал предпоследний шаг на 99%, надеясь, что это как-то повлияет 2) Почему дополнительно к этому постепенно постепенно немного изменяется ширина блока? Спасибо!

А почему она должна меняться в последнюю очередь? Все происходит в точности так, как вы и описали. Изначально блок имеет высоту 150px, к онию анимации он должен иметь высоту 100px. Вот высота и изменяется со 150px на 0% анимации до 100px на 100% Для того, чтобы высота менялась в нужный вам момент вы должны указать шаг анимации до которого высота остается неизменной. Вот так:

99% {
  background:orange;
  border-radius:0%;
  border: 3px solid;
  height:150px;
}
 
100% {
  height:100px;
}

Zanzibaa, «Почему дополнительно к этому постепенно постепенно немного изменяется ширина блока?» По той же самой причине. На 0% толщина border равна нулю, а на 99% равна 3px, ну а поскольку толщина border не учитывается при расчете размеров блока, эта самая толщина увеличивает блок в размерах. То есть блок

<div class="box"></div>

.box{
  width: 100px;
  height: 100px;
  border: 20px solid #000;
}

будет иметь размеры не 100 на 100 пикселей, а 140 на 140 так как к его изначально заданным размерам с каждой стороны добавиться по 20px толщины border-а. Для того чтобы в расчетах размеров элемента учитывалась толщина border, нужно элементу задать свойство box-sizing: border-box;