如何在React App中使用样式化的组件动画化ReactSvg组件

Question

我有一个很大的svg图像，我必须使用样式化组件来对关键帧进行动画处理。我决定安装React-svg组件以在渲染功能中显示svg。

但是我不确定如何使用样式化的组件对该组件进行动画处理。

这是我尝试过的

Keyframe.js

import { keyframes } from 'styled-components'

export const waveEffect = keyframes`
 0% {
    opacity: 0;
    transform: translateY(100px);
  }
  20% {
    opacity: 1;
    transform: translateY(0px);
  }
  85% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
`; 

Home.js

import styled, { keyframes } from 'styled-components';
  import ReactSVG from 'react-svg';
  import waves from '../../assets/images/jala.svg'
  import { waveEffect } from '../../helpers/keyframe'

  function Home() {

    const MovingWaves = styled(waves)`
        animation: ${waveEffect} 6.3s infinite linear;
    `; 

   return (
      <Grid item xs={12} className={classes.waves} >
            <ReactSVG
               src={waves} />
      </Grid>
   )
  }

如何为特定的React-svg组件设置动画

谢谢。