CSS код создания кружка, размер которого меняется с помощью анимации

Вот пример простого CSS кода для создания кружка, размер которого меняется с помощью анимации.

Этот код создает кружок с начальным размером 100×100 пикселей красного цвета. Затем применяется анимация changeSize, которая меняет размер кружка с 100×100 пикселей до 200×200 пикселей и обратно за 2 секунды. Анимация повторяется бесконечно в обоих направлениях.

<style>
    .circle {
        width: 100px;
        height: 100px;
        background-color: red;
        border-radius: 50%;
        animation: changeSize 2s alternate infinite;
    }

    @keyframes changeSize {
        from {
            width: 100px;
            height: 100px;
        }
        to {
            width: 200px;
            height: 200px;
        }
    }
</style>
<div class="circle"></div>

Пример работы