How to use the emotion.keyframes function in emotion

<div>
    <div>
    <div>
    <div>
    <div>
    <div>
  </div>
);

export default PresetLoadingAnimation;

const bounce = keyframes({
  "0%": { transform: "scaleY(0.25)" },
  "40%": { transform: "scaleY(0.75)" },
  "80%": { transform: "scaleY(0.25)" },
  "100%": { transform: "scaleY(0.25)" },
});

const styles = {
  loadingAnimation: css({
    display: "flex",
    alignItems: "center",
    marginLeft: "0.5rem",
  }),
  loadingTick: css({
    width: "4px",
    height: "100%",
    backgroundColor: "rgba(255,255,255,0.25)",</div></div></div></div></div>

export const animateText = function (
  text = null,
  animation = {},
  letter_delay = 200,
  tag = "span",
  delay = 0,
  style = {},
) {
  if (text == null)
    throw "Target not defined";
  if (typeof text !== "string")
    throw "Target is not a string";
  const animationName = keyframes(animation.frames);
  const Letter = ({ letter, delay: letterDelay, nosplit = false }) => {
    let element, ref;
    const cls = css({
      animationName,
      animationDuration: (animation.duration || 1000) + "ms",
      animationDelay: (nosplit ? delay : delay + letterDelay) + "ms",
      animationTimingFunction: animation.easing || "ease",
      animationIterationCount: animation.loop || 1,
      animationFillMode: animation.mode || "forwards",
      animationDirection: animation.direction || "unset",
    });
    ref = useRef(null);
    useEffect(() => {
      element = ref.current;
      if (!element.classList.contains(cls)) {
        element.classList.add(cls);

return new Promise(function (resolve) {
    if (element == null)
      throw "Target not defined";
    if (!isElement(element))
      throw "Target is not a valid  element";
    const animationName = keyframes(animation.frames);
    const cls = css({
      animationName,
      animationDuration: (animation.duration || 1000) + "ms",
      animationTimingFunction: animation.easing || "ease",
      animationIterationCount: animation.loop || 1,
      animationFillMode: animation.mode || "forwards",
      animationDirection: animation.direction || "unset",
    });
    setTimeout(() => {
      if (!element.classList.contains(cls)) {
        element.classList.add(cls);
      } else {
        element.classList.remove(cls);
        void element.offsetWidth;
        element.classList.add(cls);
      }

alignItems: 'center',
  marginBottom: '0.5rem',
  '> *': {
    marginRight: 10,
  },
})

export const effectError = css({
  backgroundColor: colors.red,
  color: colors.white,
  padding: '0.1rem 0.5rem',
  fontsize: 14,
  borderRadius: 2,
})

const pulse = keyframes({
  from: {
    opacity: 0.5,
  },
  to: {
    opacity: 1,
  },
})

export const pendingOperatorItem = css({
  animation: `${pulse} 1s ease-out infinite`,
  animationDirection: 'alternate',
})

import * as Color from 'color'
import { css, keyframes } from 'emotion'
import theme from '../../theme'

const scaleIn = keyframes({
  from: {
    transform: 'scale(0.95) translateY(2%)',
  },
  to: {
    transform: 'scale(1) translateY(0%)',
  },
})

export default {
  body: css({
    overflow: 'hidden',
  }),

  modal: css({
    position: 'fixed',
    top: 0,

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @format
 */

import styled from '@emotion/styled';
import {keyframes} from 'emotion';

const animation = keyframes({
  '0%': {
    transform: 'rotate(0deg)',
  },
  '100%': {
    transform: 'rotate(360deg)',
  },
});

const LoadingIndicator = styled.div<{size: number}>(props => ({
  animation: `${animation} 1s infinite linear`,
  width: props.size,
  height: props.size,
  minWidth: props.size,
  minHeight: props.size,
  borderRadius: '50%',
  border: `${props.size / 6}px solid rgba(0, 0, 0, 0.2)`,

import {keyframes} from 'emotion'

import styled from '../styled'

const animation = keyframes({
  '0%': {
    strokeDasharray: '1, 200',
    strokeDashoffset: 0,
  },
  '50%': {
    strokeDasharray: '89, 200',
    strokeDashoffset: -35,
  },
  '100%': {
    strokeDasharray: '89, 200',
    strokeDashoffset: -124,
  },
})

const SpinnerCircle = styled.circle({
  fill: 'none',

(keyframeNames, keyframeKey) => ({
      ...keyframeNames,
      [keyframeKey]: createKeyframe(keyframes[keyframeKey])
    }),
    {}

if (props.type === 'danger' && props.windowIsFocused && !props.disabled) {
    return colors.red;
  } else if (
    props.type === 'primary' &&
    props.windowIsFocused &&
    !props.disabled
  ) {
    return colors.white;
  } else if (props.disabled) {
    return colors.macOSTitleBarIconBlur;
  } else {
    return colors.light50;
  }
};

const pulse = keyframes({
  '0%': {
    boxShadow: `0 0 4px 0 ${colors.macOSTitleBarIconSelected}`,
  },
  '70%': {
    boxShadow: '0 0 4px 6px transparent',
  },
  '100%': {
    boxShadow: '0 0 4px 0 transparent',
  },
});

const StyledButton = styled.div<{
  windowIsFocused?: boolean;
  compact?: boolean;
  inButtonGroup?: boolean;
  padded?: boolean;

import { keyframes, css } from "emotion";
import { mixins } from "../../theme";

const bounceDelay = keyframes({
  "0%, 80%, 100%": {
    transform: "scale(0)"
  },
  "40%": {
    transform: "scale(1)"
  }
});

export const spinnerStyle = css({
  ...mixins.flexSpaceBetween,
  width: 70,
  "> div": {
    width: 18,
    height: 18,
    borderRadius: "100%",
    display: "inline-block",