<div id="box"></div>
<div id="content"></div>div {
width: 50px;
height: 50px;
top: 70px;
left: 70px;
background-color: green;
position: absolute;
}
#box {
background-color: lightgreen;
border: solid darkorange 3px;
margin-left: -3px;
margin-top: -3px;
}
let box = document.querySelector('#box');
let animation = anime({
targets: '#content',
translateY: [
{value: 50, duration: 500},
{value: 0, duration: 500, delay: 1500},
{value: -53, duration: 500, delay: 500},
{value: 0, duration: 500, delay: 2500},
{value: 50, duration: 500, delay: 500},
{value: 0, duration: 500, delay: 1500}
],
translateX: [
{value: 53, duration: 500, delay: 1000},
{value: 0, duration: 500, delay: 2500},
{value: -53, duration: 500, delay: 500},
{value: 0, duration: 500, delay: 2500}
],
easing: 'linear',
begin: function() {
box.style.borderBottom="none";
},
complete: function() {
box.style.borderBottom="solid darkorange 3px";
}
});
External CSS
This Pen doesn't use any external CSS resources.