How to use the popmotion.keyframes function in popmotion

targetStyler.set({
				"transform-origin": "top left",
				visibility: "visible"
			});

			const diffTargetStyles = diffRect(originalRect, targetRect);

			const translateFrom = keyframes({
				values: [
					{ ...diffTargetStyles },
					{ translateX: 0, translateY: 0, scaleX: 1, scaleY: 1 }
				],
				easings: easing.linear
			});

			const fadeIn = keyframes({
				values: [{ opacity: 0 }, { opacity: 1 }],
				easings: easing.linear
				// times: [0.9, 1]
			});

			// const fadeInOnce = onceDifferent(s => {
			// 	console.log("s: ", s);
			// 	fadeIn.start(targetStyler.set);
			// });
			// fadeOut.start(cloneStyler.set);

			// Image bg fix.
			const bgFix = tween({
				from: diffTargetStyles.scaleX * 1000,
				to: 100,
				easings: easing.linear

this.identifyBtnRef.animation.stop(this.identifyBtnRef.styler);
      this.identifyBtnRef = null;
      return ;

    } else if(!this.identifyBtnRef && !kill) {

      let btn = styler(this.details.nativeElement.querySelector('#identify-btn'), {});
      let startShadow = btn.get('box-shadow');

      const elementBorder = value({borderColor: '', borderWidth: 0 }, ({ borderColor, borderWidth }) => btn.set({
        boxShadow: `0 0 0 ${borderWidth}px ${borderColor}` 
      }));

      // Convert color to rgb value
      let cc = this.hexToRGB(this.theme.cyan);
      const animation = keyframes({
        values: [
          { borderWidth: 0, borderColor: 'rgb(' + cc.rgb[0] +', ' + cc.rgb[1] +', ' + cc.rgb[2] +')' },
          { borderWidth: 30, borderColor: 'rgb(' + cc.rgb[0] +', ' + cc.rgb[1] + ', ' + cc.rgb[2] + ', 0)' } 
        ],
        duration:1000,
        loop: Infinity
      }).start(elementBorder);

      this.identifyBtnRef = { animation: animation, originalState: startShadow, styler: elementBorder};

    }
  }

const fadeIns = this.fadeInElements.map(({ element, options = {} }) =>
			keyframes({
				values: [0, 1],
				easings: easing.strongerEaseIn,
				times: [0.8, 0.9]
			})
				.start(v => (element.style.opacity = v))
				.pause()
		);

startAnimation = () => {
    this.animation = keyframes({
      values: [GREEN, ACTION, BRAND, ENTITY, GREEN],
      duration: 10000,
      ease: easing.linear,
      loop: Infinity
    }).start(v => this.boxStyler.set('background', v));
  };

startAnimation() {
    this.animation = keyframes({
      values: [
        { x: 0, y: 0, rotateY: 0, backgroundColor: ENTITY },
        { x: 300, y: 0, rotateY: 180, rotateX: 0, backgroundColor: GREEN },
        { x: 300, y: 200, rotateY: 180, rotateX: 180, backgroundColor: GREEN },
        { x: 0, y: 200, rotateY: 0, rotateX: 180, backgroundColor: ENTITY },
        { x: 0, y: 0, rotateY: 0, rotateX: 0, backgroundColor: ENTITY }
      ],
      duration: 3000,
      easings: [
        easing.easeInOut,
        easing.easeInOut,
        easing.easeInOut,
        easing.easeInOut
      ],
      loop: Infinity
    }).start(this.boxStyler.set);

colorLoopAnimation(){
    const s = keyframes({
      values: this.colorLoop,
      duration: 60000,
      //ease: easing.linear,
      loop: Infinity,
    });

    const startColorLoop = () => { 
      const a = s.start(this.elStyler.set('background-color'));
      return a;
    }

    if(!this.colorLoopActive && this.colorLoop.length > 0){
      this.colorLoopActive  = startColorLoop();
    }

    const reset = () => {

values: [1, 0],
				times: [0, 0.1],
				easings: easing.linear
			});

			const diffStyle = diffRect(targetRect, originalRect);

			const translateIn = keyframes({
				values: [
					{ translateX: 0, translateY: 0, scaleX: 1, scaleY: 1 },
					diffStyle
				],
				easings: easing.linear
			});

			const fadeOut = keyframes({
				values: [{ opacity: 1 }, { opacity: 0 }],
				easings: easing.linear,
				times: [0.9, 1]
			});

			targetStyler.set({
				"transform-origin": "top left",
				visibility: "visible"
			});

			const diffTargetStyles = diffRect(originalRect, targetRect);

			const translateFrom = keyframes({
				values: [
					{ ...diffTargetStyles },
					{ translateX: 0, translateY: 0, scaleX: 1, scaleY: 1 }