<div class="circle"></div>
<div class="shadow"></div>body {
font-family: system-ui;
background: #252323;
color: white;
align-items: center;
}
.circle {
position: absolute;
top: 25vh;
width: 35px;
height: 35px;
background-color: orange;
border-radius: 50%;
}
.shadow {
position: absolute;
top: 25vh;
width: 35px;
height: 35px;
background-color: orange;
border-radius: 50%;
opacity: .4;
}import anime from "https://cdn.skypack.dev/animejs";
anime({
targets: '.circle',
translateX: [
{ value: 250, duration: 1000, delay: 500 },
{ value: 0, duration: 1000, delay: 500 }
],
translateY: [
{ value: -40, duration: 500 },
{ value: 40, duration: 500, delay: 1000 },
{ value: 0, duration: 500, delay: 1000 }
],
scaleX: [
{ value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
{ value: 1, duration: 900 },
{ value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
{ value: 1, duration: 900 }
],
scaleY: [
{ value: [1.75, 1], duration: 500 },
{ value: 2, duration: 50, delay: 1000, easing: 'easeOutExpo' },
{ value: 1, duration: 450 },
{ value: 1.75, duration: 50, delay: 1000, easing: 'easeOutExpo' },
{ value: 1, duration: 450 }
],
easing: 'easeOutElastic(1, .8)',
loop: true
});
External CSS
This Pen doesn't use any external CSS resources.