Animation not happening In React Component

I am trying to achieve animation in a react app. The styles are getting imported from .js file (CSS in JS?). And those styles are getting applied except for the animation. The animation isn’t working.

Styles.js containing styles is as below:

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

const bounceAnimation = keyframes`
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
`;
const classes = {
  loadingContainer: {
    fontSize: '84px',
    fontWeight: 800,
    textAlign: 'center',
  },
  loadingSpan: {
    display: 'inline-block',
    animation: `${bounceAnimation} 0.7s infinite`,
    color: 'red',
    margin: '0 -.05em',
  },
};

export default classes;

The React Component is as below:

import React from 'react';
import styles from './styles';

const Loader = () => {
  return (
    <div style={styles.loadingContainer}>
      <span style={styles.loadingSpan}>loading</span>
    </div>
  );
};

export default Loader;