React inlined SVG paths are not responding to css animations

I uploaded my code and svgs to this github repo.

I have some svgs of some circles, blobs and triangles. I am trying to make the circles shake, like how the guy shakes in this code pen when you hover on him, I am trying to make the blobs move like waves like in this code pen, and I’m trying to make the triangles spin around. The blobs and triangles are not responding at all, even though I can see that they have the styling applied when I inspect the html. The circles have some effect, but not the one I want.

---

Here is the code for each

circles.scss

    .circles > circle {
        animation: shake 2.2s cubic-bezier(.36,.07,.19,.97) both;
    }
    
    @keyframes shake {
      10%, 90% {
        transform: translate3d(-1px, 0, 0);
      }
      
      20%, 80% {
        transform: translate3d(2px, 0, 0);
      }
    
      30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
      }
    
      40%, 60% {
        transform: translate3d(4px, 0, 0);
      }
    }

triangles.scss

    .triangles > g > path {
        animation: triangle-animation 2.2s cubic-bezier(.36,.07,.19,.97) both;
    }
    
    @keyframes triangle-animation {
      10%, 90% {
        tranform: rotate(5deg);
      }
      
      20%, 80% {
        tranform: rotate(90deg);
      }
    
      30%, 50%, 70% {
        tranform: rotate(180deg);
      }
    
      40%, 60% {
        tranform: rotate(30deg);
      }
      100% { 
          tranform: rotate(0deg);
      }
    }

waves.scss

    .waves > path {
      animation: wave-animation 4s infinite alternate;
    //   animation-duration: 4s;
    //   animation-iteration-count: infinite;
    //   animation-direction: alternate;
    }
    
    @keyframes wave-animation {
      0%   {
        margin-left:0px;
        margin-top:0px;
        }  
      50%  {
        margin-left:-2000px;
        margin-top:200px;
        }  
      100% {
        margin-left:0px; 
        margin-top:0px;
        }
    }

And this is my main App.js file

    import React from 'react';
    
    import Blobs from 'svg/Blobs.svg'
    import Circles from 'svg/Circles.svg';
    import Triangles from 'svg/Triangles.svg';
    
    export default () => (
        <div>
            <Circles className="circles" />
            <Blobs className=" w-100 h-100 waves" />
            <Triangles className='w-100 triangles' />                
        </div>
    );

The styles are imported in index.js

Thank you

Answer

Create components with the svg code inside then add your css classes … I advise you to start from scratch and create your own svg, it’s easier than using already created svg.

(check the demo at the bottom of the page with the triangles, circles and waves)

App.js

import React from 'react';
import './style.css';

import Triangles from './svg/Triangles';

export default function App() {
  return (
    <div>
      <Triangles />
    </div>
  );
}

Triangles.js

import React from 'react';

export default function Triangles() {
  return (
    <div className="triangles">
      <svg className="triangle one">
        <path d="M150 0 L30 200 L270 200 Z" />
      </svg>
      <svg className="triangle two">
        <path d="M120 0 L30 180 L200 200 Z" />
      </svg>
      <svg className="triangle three">
        <path d="M10 0 L40 280 L190 170 Z" />
      </svg>
    </div>
  );
}

style.css

/* Triangles */
.triangles {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50vh;
}
.triangle {
  position: absolute;
  fill: rgb(23, 233, 224);
  fill-opacity: 0.4;
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.triangle.one {
  height: 210px;
  width: 300px;
  animation-duration: 5000ms;
}
.triangle.two {
  height: 150px;
  width: 400px;
  animation-duration: 9000ms;
}
.triangle.three {
  height: 120px;
  width: 300px;
  animation-duration: 3000ms;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Demo : Stackblitz