<div id="TLParamsInheritance">
<div class="line">
<div class="square el"></div>
</div>
<div class="line">
<div class="circle el"></div>
</div>
<div class="line">
<div class="triangle el"></div>
</div>
</div>.line {
position: relative;
}
.square {
position: absolute;
top: 20px;
left: 0;
width: 50px;
height: 50px;
background-color: #0f97ea;
}
.circle {
position: absolute;
top: 80px;
left: 0;
border-radius: 50%;
width: 50px;
height: 50px;
background-color: #0f97ea;
}
.triangle {
position: absolute;
top: 140px;
left: 0;
border-right: 25px solid transparent;
border-bottom: 43.3012px solid #0f97ea;
border-left: 25px solid transparent;
}var TLParamsInheritance = anime.timeline({
targets: '#TLParamsInheritance .el',
delay: function(el, i) { return i * 200 },
duration: 500,
easing: 'easeOutExpo',
direction: 'alternate',
loop: true
});
TLParamsInheritance
.add({
translateX: 250,
})
.add({
opacity: .5,
translateX: 250,
scale: 2,
})
.add({
translateX: 0,
scale: 1
});
External CSS
This Pen doesn't use any external CSS resources.