Java Script keyframe animation

[BaronIncognito]

Hi guys!

I’m trying to ‘link’ keyframes so that it returns different animation depending on the placement of the element (it can be top or bottom). So I tried this ‘code’, and it doesn’t work at all. Basically it checks if placement is top or bottom and returns translateY 100px or -100px, just exactly as it is written here in mdn docs. Can anyone suggest the format of the keyframe that I should use?

const position = context.component?.props?.['69d134c1-932d-46e9-82de-53d601092a72'];

function getKeyframeAnimation(position) {
  const bottomPositions = ["bottom right", "bottom center", "bottom left"];
  const topPositions = ["top right", "top center", "top left"];

  if (bottomPositions.includes(position)) {
    return `
      @keyframes slideUpFromBottom {
        0% {
          transform: translateY(100px);
        }
        100% {
          transform: translateY(0);
        }
      }
    `;
  }

  if (topPositions.includes(position)) {
    return `
      @keyframes slideDownFromTop {
        0% {
          transform: translateY(-100px);
        }
        100% {
          transform: translateY(0);
        }
      }
    `;
  }

  return '';
}

const animationCSS = getKeyframeAnimation(position);
return animationCSS;

[BaronIncognito]