emotionを使った逆再生アニメーションの実装方法について ～cssプロパティとjavascriptのanimateメソッドを比較して～

const a = keyframes`
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
  }
`;

...
...
...

<StyledCard
  ref={itemDomRef}
  className={cx(
  `div${n}`,
  css`
    animation-duration: ${duration};
    animation-delay: ${delay}ms;
    animation-direction: ${hide ? 'normal' : 'reverse'};
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-fill-mode: both;
    animation-name: ${a};
  `
  )}
  >
</StyledCard>

 useEffect(() => {
    const anim = itemDomRef.current.animate(
      [
        {
          WebkitTransform: 'translateY(0)',
          transform: 'translateY(0)',
          opacity: 0,
        },
        {
          WebkitTransform: 'translateY(-100px)',
          transform: 'translateY(-100px)',
          opacity: 1,
        },
      ],
      {
        duration: duration,
        delay: delay,
        direction: hide ? 'normal' : 'reverse',
        easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
        fill: 'both',
      }
    );
    return () => {
      anim.cancel();
    };
  }, [duration, delay, hide]);