<div class="box" id="elem"></div>.box{
position: absolute;
top: 50px;
left: 10px;
background-color: #ea0f9b;
width: 20px;
height: 20px;
}var keyframes = anime({
targets: '#elem',
translateX: [
{ value: 250, duration: 1000, delay: 500, elasticity: 0 },
{ value: 0, duration: 1000, delay: 500, elasticity: 0 }
],
translateY: [
{ value: -40, duration: 500, elasticity: 100 },
{ value: 40, duration: 500, delay: 1000, elasticity: 100 },
{ value: 0, duration: 500, delay: 1000, elasticity: 100 }
],
scaleX: [
{ value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
{ value: 1, duration: 900, elasticity: 300 },
{ value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
{ value: 1, duration: 900, elasticity: 300 }
],
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 }
],
loop: true
});
External CSS
This Pen doesn't use any external CSS resources.