import { css, keyframes } from '@compiled/react';
import React, { lazy } from 'react';

const fadeIn = keyframes({
  from: {
      opacity: "0"
  },
  to: {
      opacity: "1"
  }
});
const slideInLeft = keyframes({
  from: {
      transform: "translateX(-100%)",
      opacity: "0"
  },
  to: {
      transform: "translateX(0%)",
      opacity: "1"
  }
});
const slideInRight = keyframes({
  from: {
      transform: "translateX(0%)",
      opacity: "0"
  },
  to: {
      transform: "translateX(100%)",
      opacity: "1"
  }
});
const fadeInCss = css({
  "opacity": "0",
  "animation": `0.4s ease-in ${fadeIn} 200ms forwards`
});
const slideInLeftCss = css({
  "opacity": "0",
  "animation": `0.5s ${slideInLeft} forwards`
});
const slideInRightCss = css({
  "opacity": "0",
  "animation": `0.5s ${slideInRight} forwards`
});

const firstOpen = false;

export const App = () => (
  <>
    <div css={[firstOpen ? fadeInCss : slideInRightCss]}>hello world</div>
  </>
);

<div css={[firstOpen && fadeInCss, !firstOpen && slideInRightCss]}>hello world</div>