Если вы хотите анимировать круги, лучше вам использовать canvas
или svg
, там это намного удобнее делается
let big = document.getElementById('bigCircle')
let betw = document.getElementById('between')
let last = document.getElementById('last')
function bigCirc() {
let size = 10;
let inter = setInterval(() => {
size += 10
big.style.width = size + 'px'
big.style.height = size + 'px'
if (size == 400) {
clearInterval(inter)
}
}, 30)
}
function between() {
let size = 5;
let inter = setInterval(() => {
size += 5
betw.style.width = size + 'px'
betw.style.height = size + 'px'
if (size == 300) {
clearInterval(inter)
}
}, 30)
}
function laster() {
let size = 4;
let inter = setInterval(() => {
size += 4
last.style.width = size + 'px'
last.style.height = size + 'px'
if (size == 200) {
clearInterval(inter)
}
}, 30)
}
laster()
between()
bigCirc()
#bigCircle {
border: 5px;
border-radius: 50%;
width: 1px;
height: 1px;
background-color: red;
margin: 0 auto;
}
#between {
border: 5px;
border-radius: 50%;
width: 1px;
height: 1px;
background-color: blue;
margin: 0 auto;
}
#last {
border: 5px;
border-radius: 50%;
width: 1px;
height: 1px;
background-color: yellow;
margin: 0 auto;
}
<div id='bigCircle'>
<div id='between'>
<div id=last>
</div>
</div>
</div>
Вариант с transform: translate
let big = document.getElementById('bigCircle');
let betw = document.getElementById('between');
let last = document.getElementById('last');
function bigCirc() {
const maxSize = 400;
let size = 5;
let inter = setInterval(() => {
size += 5;
big.style.width = size + 'px'
big.style.height = size + 'px'
if (size >= maxSize) {
clearInterval(inter);
between();
}
}, 16);
}
function between() {
const maxSize = 300;
let size = 2.5;
let inter = setInterval(() => {
size += 2.5;
betw.style.width = size + 'px'
betw.style.height = size + 'px'
if (size >= maxSize) {
clearInterval(inter);
laster();
}
}, 16);
}
function laster() {
const maxSize = 200;
let size = 1.5;
let inter = setInterval(() => {
size += 1.5;
last.style.width = size + 'px'
last.style.height = size + 'px'
if (size >= maxSize) {
clearInterval(inter);
}
}, 16);
}
function start() {
bigCirc();
}
start();
#bigCircle, #between, #last {
border: 5px;
border-radius: 50%;
--size: 10px;
width: var(--size);
height: var(--size);
}
#between, #last {
position: absolute;
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
}
#bigCircle {
background-color: red;
margin: 0 auto;
position: relative;
}
#between {
background-color: blue;
--size: 30px;
}
#last {
background-color: yellow;
}
<div id='bigCircle'>
<div id='between'>
<div id=last>
</div>
</div>
</div>
Я бы сделал это на промисах, чтобы удобно смотреть когда анимация закончилась и requestAnimationFrame
для плавной анимации
const bigElem = document.getElementById('bigCircle');
const betwElem = document.getElementById('between');
const lastElem = document.getElementById('last');
function animate({timing, draw, duration}) {
let start = performance.now();
requestAnimationFrame(function animate(time) {
// timeFraction изменяется от 0 до 1
let timeFraction = (time - start) / duration;
if (timeFraction > 1) timeFraction = 1;
// вычисление текущего состояния анимации
let progress = timing(timeFraction);
draw(progress); // отрисовать её
if (timeFraction < 1) requestAnimationFrame(animate);
});
}
function animationStart() {
const options = {
elem: bigElem,
size: 300,
duration: 2000,
};
animationElem(options).then(res => {
console.log('Первая анимация закончилась');
const options = {
elem: betwElem,
size: 200,
duration: 2000,
};
return animationElem(options);
}).then(res => {
console.log('Вторая анимация закончилась');
const options = {
elem: lastElem,
size: 100,
duration: 1000,
};
return animationElem(options);
}).then(res => {
console.log('Третья анимация закончилась');
});
}
function animationElem(options) {
return new Promise(resolve => {
animate({
duration: options.duration,
timing(timeFraction) {
return Math.pow(timeFraction, 2);
},
draw(progress) {
options.elem.style.width = (progress * options.size) + 'px';
options.elem.style.height = (progress * options.size) + 'px';
if (progress === 1) resolve(true);
}
});
});
}
animationStart();
#bigCircle,
#between,
#last {
border: 5px;
border-radius: 50%;
}
#between,
#last {
position: absolute;
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
}
#bigCircle {
background-color: red;
margin: 0 auto;
position: relative;
}
#between {
background-color: blue;
}
#last {
background-color: yellow;
}
<div id="bigCircle">
<div id="between">
<div id="last">
</div>
</div>
</div>