SVG Keyframes animation not working when using image-webpack-loader - css

Question

I'm trying to draw an SVG logo using Keyframes. It works fine stand alone when I open the SVG file by itself in the browser, but it doesn't work when I try to use it in my React project.
For mu react project, I am using image-webpack-loader to load SVG images and I have made the following alterations to webpack config file:
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
hash: 'sha512',
digest: 'hex',
name: '[hash].[ext]',
}
},
{
loader:'image-webpack-loader',
options:{
bypassOnDebug:true,
},
}
],
}
Here's my React JS file code:
import React from 'react';
import '../stylesheets/Atom.css'
import Atom from '../Assets/images/atom.svg';
const AtomSpinner = props => {
return (
<div className='atomWrapper'>
<img className='atom' src={Atom}/>
</div>
);
};
export default AtomSpinner;
This is the CSS that I am using for this React Component as well as the SVG file. Even if I am putting all styles for the SVG and React in the same stylesheet, the SVG animation works fine when I use it in the browser. Here's the stylesheet:
.atomWrapper{
text-align: center;
}
.atom{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
max-height:256px ;
max-width: 256px;
}
svg {
max-width: 256px;
max-height: 256px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
path {
fill-opacity:0;
stroke: #000;
stroke-width: 3;
stroke-dasharray: 351.0306396484375em;
stroke-dashoffset:351em ;
-webkit-animation-name: draw;
-webkit-animation-duration: 10s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 2;
-webkit-animation-timing-function: ease;
}
circle {
fill-opacity:0;
stroke: #000;
stroke-width: 3;
stroke-dasharray: 304em;
stroke-dashoffset:303.5em ;
-webkit-animation-name: draw;
-webkit-animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes draw {
to {
stroke-dashoffset: 0.8;
}
to{
fill-opacity: 1;
}
}
#keyframes draw {
to {
stroke-dashoffset: 0.8;
}
to{
fill-opacity: 1;
}
}
Here's a jsFiddle with the SVG and styles in it:
https://jsfiddle.net/nxxu1Lob/1/