How to use the @emotion/core.keyframes function in @emotion/core

width: "100%",
  borderBottomLeftRadius: theme.borderRadius,
  borderBottomRightRadius: theme.borderRadius,
  border: `1px solid ${theme.color.error}`,
  borderTop: 0,
  transform: "translate3d(0, 100%, 0)",
  position: "absolute",
  backgroundColor: lighten(theme.color.error, 60),
  boxShadow: `0px 3px 5px #d3d1d3`,
  // Nudge up just a little bit to look blended into the form
  bottom: 2,
  left: 0,
  zIndex: theme.zIndex.formFieldError,
}))

export const floatIn = keyframes({
  from: {
    opacity: 0,
    transform: "translate3d(0, -6px, 0)",
  },
  to: {
    opacity: 1,
    transform: "translate3d(0, 0, 0)",
  },
})

export const resetTransform = keyframes({
  to: {
    transform: "none",
  },
})

test('keyframes interpolated into plain string', () => {
  const animateColor = keyframes({
    'from,to': { color: 'green' },
    '50%': { color: 'hotpink' }
  })
  const rotate360 = keyframes({
    from: {
      transform: 'rotate(0deg)'
    },
    to: {
      transform: 'rotate(360deg)'
    }
  })

  renderer.create(
    <div>
  )
  expect((console.error: any).mock.calls).toMatchInlineSnapshot(`
            Array [
              Array [
                "\`keyframes\` output got interpolated into plain string, please wrap it with \`css\`.
</div>

render: () => {
      const animation = keyframes(
        css`
          from {
            color: green;
          }
          to {
            color: blue;
          }
        `
      )
      return (
        
          <div>
        
      )
    }
  },</div>

import PropTypes from 'prop-types';
import cx from 'classnames';
import { useTheme } from 'emotion-theming';
import { keyframes } from '@emotion/core';
import { rgba } from 'polished';

const skeletonKeyframes = keyframes({
  from: {
    backgroundPosition: '100% 0',
  },

  to: {
    backgroundPosition: '-100% 0',
  },
});

const Skeleton = ({ as: Component, className, ...props }) => {
  const theme = useTheme();

  return (

/>
    
  )
}

const t = n => `${(n / 10.5) * 100}%`
const a1 = keyframes({
  [t(0)]: { transform: "scaleY(0)" },
  [t(1)]: { transform: "scaleY(1)" },
})
const a2 = keyframes({
  [t(0)]: { transform: "scaleY(0)" },
  [t(2)]: { transform: "scaleY(0)" },
  [t(3)]: { transform: "scaleY(1)" },
})
const a3 = keyframes({
  [t(0)]: { transform: "scaleY(0)" },
  [t(4)]: { transform: "scaleY(0)" },
  [t(5)]: { transform: "scaleY(1)" },
})
const a4 = keyframes({
  [t(0)]: { transform: "scaleY(0)" },
  [t(6)]: { transform: "scaleY(0)" },
  [t(7)]: { transform: "scaleY(1)" },
})
const a5 = keyframes({
  [t(0)]: { transform: "rotate(45deg) scaleY(0)" },
  [t(8)]: { transform: "rotate(45deg) scaleY(0)" },
  [t(9)]: { transform: "rotate(45deg) scaleY(1)" },
  to: { transform: "rotate(45deg) scaleY(1)" },
})

opacity: 0,
    transform: "translate3d(0, -6px, 0)",
  },
  to: {
    opacity: 1,
    transform: "translate3d(0, 0, 0)",
  },
})

export const resetTransform = keyframes({
  to: {
    transform: "none",
  },
})

export const spin = keyframes({
  from: {
    transform: "rotate(0deg)",
  },
  to: {
    transform: "rotate(359deg)",
  },
})

left: 0,
        zIndex: 20,
        background: "#eee",
        animation: `${popup} 0.7s`,
        [media(DESKTOP_MIN_WIDTH)]: {
          position: "absolute",
          animation: "none",
        },
      }}
    >
      {children}
    
  )
}

const popup = keyframes({
  from: {
    transform: "translateY(100%) scale(0.5)",
  },
  "50%": {
    transform: "scale(0.5)",
  },
  to: {
    transform: "translateY(0%)",
  },
})

({diagonal, topPosition, width}) => {
    const backgroundPositionAnimation = keyframes({
      from: {
        left: `-${diagonal}px`,
      },
      to: {
        left: `${diagonal + width}px`,
      },
    });

    return {
      animation: `${backgroundPositionAnimation} ${DURATION}s ease-in-out infinite`,
      background: `linear-gradient(130deg, rgba(255,255,255,0) ${TRANSPARENCY_POSITION}%, ${
        canvas.colors.frenchVanilla100
      }, rgba(255,255,255,0)  ${TRANSPARENCY_POSITION + WHITE_SHEEN_WIDTH}%)`,
      backgroundRepeat: 'no-repeat',
      backgroundSize: `${diagonal}px ${diagonal}px`,
      width: diagonal,

* @default 18px
   */
  size?: number
  /** Renders a bouncing animation as opposed to a regular spinning one. */
  bounce?: boolean
  /**
   * Indicates that this component is left of other content, and adds an appropriate right margin.
   */
  left?: boolean
  /**
   * Indicates that this component is right of other content, and adds an appropriate left margin.
   */
  right?: boolean
}

const spinKeyframes = keyframes({
  "0%": {
    transform: "rotate(0deg)",
  },
  "100%": {
    transform: "rotate(360deg)",
  },
})

const bounceKeyframes = keyframes({
  "0%": {
    transform: "translate3d(0, 0, 0)",
  },
  "30%": {
    transform: "translate3d(0, -4px, 0)",
  },
  "60%": {

},
});

const AnimatedCircle = styled.circle({
    animation: `${animation} 2s linear infinite`,
    fill: 'none',
});

export const SpinnerSvg: React.FC<{ color: string; size: string | number }> = ({ color, size }) => (
    <svg viewBox="0 0 100 100" height="{size}" width="{size}">
        
        
    </svg>
);

const fadeIn = keyframes({
    '0%': { opacity: 0 },
    '100%': { opacity: 1 },
});

const Container = styled.div(({ size, centered }) =&gt; {
    const styles: CSSObject = {
        display: 'inline-block',
        animation: `${fadeIn} 250ms ease-in-out`,
        width: size,
        height: size,
    };

    if (centered) {
        styles.position = 'absolute';
        styles.top = `calc(50% - ${size! / 2}px)`;
        styles.left = `calc(50% - ${size! / 2}px)`;