Mocking CSS key frame animation in K-Frame (VR)

I want to create an animation on a single property (eg: scale) of a single entity (eg: a-circle) which would run one after another, using K-Frame. Is this possible?

For example, this would be a simple case:

<a-scene>
  <a-circle 
    position="0 1.25 -5" 
    color="#F55" 
    radius="1" 
    scale=".1 .1 1"
    animation__scale="property: scale; dir: normal; dur: 500; easing: easeInSine; loop: true; to: 1 1 1"
  >
  </a-circle>
</a-scene>

I want to, say, scale from .1 .1 1 to .5 .5 1 for the first 500ms, then stay at .5 .5 1 for another 500ms, and go back to .1 .1 1 in the next 200ms, and then loop through this entire process over and over infinitely.

Is this even possible?

Solution

You can daisy-chain the animations within a component checking which animation ended and starting the next one.
In Your case that would be

animation1 ended -> wait 500ms and start animation2 -> animation2 ended -> wait 200 ms and start animation1.

You can achieve this, by simply listening for the animation__[ID]-complete event, and emit another one.
If You just chained them, You could just map multiple listeners on the start event list.
However You want to give them some custom wait periods, which can be included within the mapped functions, or done manually:

  el.addEventListener('animation__scale1-complete', function() {
    setTimeout(function(){
    el.emit('secondAnimation');
    },500);
  })
   el.addEventListener('animation__scale2-complete', function() {
    setTimeout(function(){
    el.emit('firstAnimation');
    },200);
  })

working fiddle here: https://jsfiddle.net/gftruj/2qoz8b75/2/
Please note, that i trigger the first animation also on the loaded event in case it fires before its loaded.