<div id="finishedPromise">
<div class="logs"><input class="log finished-log"></div>
<div class="box" id="elem"></div>
</div>#finishedPromise {
position: relative;
}
.box{
background-color: #ea0f9b;
width: 80px;
height: 80px;
cursor: pointer;
}
.log {
position: absolute;
top: 40px;
left: 100px;
border: none;
font-size: 14px;
color: #ea0f9b;
}var finishedPromise = anime({
targets: '#finishedPromise #elem',
translateX: 250,
delay: 1000
});
var finishedLogEl = document.querySelector('#finishedPromise .finished-log');
var promise = finishedPromise.finished.then(logFinished);
function logFinished() {
finishedLogEl.value = 'アニメーション終了！';
}
External CSS
This Pen doesn't use any external CSS resources.