<div class="box el"></div>
<div class="circle el"></div>
<div class="triangle el"></div>body {
font-family: system-ui;
background: #252323;
color: white;
align-items: center;
}
.el {
position: relative;
top: 15vh;
width: 50px;
height: 50px;
margin: 1%;
background-color: orange;
}
.circle {
border-radius: 50%;
}
.triangle {
background-color: transparent;
width: 0;
height: 0;
border-style: solid;
border-width: 0 25px 45px 25px;
border-color: transparent transparent orange transparent;
}import anime from "https://cdn.skypack.dev/animejs";
var tl = anime.timeline({
easing: 'easeOutExpo',
duration: 750
});
// Add children
tl
.add({
targets: '.box',
translateX: 250,
})
.add({
targets: '.circle',
translateX: 250,
})
.add({
targets: '.triangle',
translateX: 250,
});
External CSS
This Pen doesn't use any external CSS resources.