Анимация не происходит в компоненте React ⇐ CSS

[Гость]

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 ( loading ); }; export default Loader;


Источник: https://stackoverflow.com/questions/780 ... -component