<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.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js