Вот как можно обойтись без js. Но обратите внимание, настройте высоту .wraper для вашего собственного проекта.
Например, это свойство помогает удалить полосы прокрутки:
overflow: hidden;
Также важно, чтобы родительский div быть относительным положением, а дочерний div - абсолютным.
.wraper {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.circle {
width: 30px;
height: 30px;
position: absolute;
top: 50%;
right: 50%;
transform: translateX(50%) translateY(-50%);
border-radius: 50%;
border: 2px solid #000;
animation-name: example;
animation-duration: 15s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
@keyframes example {
0% {width: 30px; height: 30px;}
100% {width: 3000px; height: 3000px;}
}
<div class="wraper">
<div class="circle">
</div>
</div>