Getting started with advanced animation - SVGs not being impacted by CSS?

Animations
1

I’m trying to work on some more advanced animation, for example to animate in individual parts of an infographic. I think the best way to to this would be with an SVG so that all the parts can be vector images, rather than bringing in lots of PNGs for example - but when I try this, I’m so far unable to use page CSS to edit my SVG.

One thing I have noticed is that if I import an SVG into the image widget, Readymag seems to be replacing the group id of each component with a random string of numbers and letters, rather than the original labels which are in the file. Then every time I reload the preview, those strings of numbers and letters change, so I cannot use those to target individual elements.

ORIGINAL SVG FROM ILLUSTRATOR:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 570 500"><defs><style>.cls-1{fill:#b5d9d6;}.cls-1,.cls-2{stroke-width:0px;}.cls-3{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:2px;}.cls-2{fill:#e9e0f4;}</style></defs><g id="Shapes"><path class="cls-1" d="M363.83,81.57c-.93,0-1.87-.09-2.82-.27-11.54-2.19-23.4-3.31-35.25-3.31-8.28,0-15-6.72-15-15s6.72-15,15-15c13.73,0,27.48,1.29,40.86,3.83,8.14,1.55,13.48,9.4,11.93,17.54-1.37,7.19-7.66,12.2-14.72,12.2Z"/><path class="cls-2" d="M455.81,271.81c-7.84,0-14.43-6.08-14.95-14.02-3.97-60.36-54.53-107.65-115.1-107.65-8.28,0-15-6.72-15-15s6.72-15,15-15c37.14,0,72.48,14,99.53,39.42,26.92,25.31,43.08,59.49,45.5,96.25.54,8.27-5.72,15.41-13.98,15.95-.33.02-.67.03-1,.03Z"/></g><g id="Lines"><path class="cls-3" d="M195.41,265.5c0,71.99,58.36,130.35,130.35,130.35s130.35-58.36,130.35-130.35-58.36-130.35-130.35-130.35H0"/><path class="cls-3" d="M123.26,265.5c0,111.84,90.66,202.5,202.5,202.5s202.5-90.66,202.5-202.5S437.6,63,325.76,63H80.78"/></g></svg>

EXAMPLE SVG ON READYMAG PAGE:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 47.99000549316406 528.260009765625 420.010009765625" preserveAspectRatio="xMidYMid meet" role="img"><defs><style>.cls-1{fill:#b5d9d6;}.cls-1,.cls-2{stroke-width:0px;}.cls-3{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:2px;}.cls-2{fill:#e9e0f4;}</style></defs><g id="957fdb51-fcbd-4e71-a32f-86102592c923"><path class="cls-1" d="M363.83,81.57c-.93,0-1.87-.09-2.82-.27-11.54-2.19-23.4-3.31-35.25-3.31-8.28,0-15-6.72-15-15s6.72-15,15-15c13.73,0,27.48,1.29,40.86,3.83,8.14,1.55,13.48,9.4,11.93,17.54-1.37,7.19-7.66,12.2-14.72,12.2Z"></path><path class="cls-2" d="M455.81,271.81c-7.84,0-14.43-6.08-14.95-14.02-3.97-60.36-54.53-107.65-115.1-107.65-8.28,0-15-6.72-15-15s6.72-15,15-15c37.14,0,72.48,14,99.53,39.42,26.92,25.31,43.08,59.49,45.5,96.25.54,8.27-5.72,15.41-13.98,15.95-.33.02-.67.03-1,.03Z"></path></g><g id="d5017308-4452-41d4-bbda-5304c5abecac"><path class="cls-3" d="M195.41,265.5c0,71.99,58.36,130.35,130.35,130.35s130.35-58.36,130.35-130.35-58.36-130.35-130.35-130.35H0"></path><path class="cls-3" d="M123.26,265.5c0,111.84,90.66,202.5,202.5,202.5s202.5-90.66,202.5-202.5S437.6,63,325.76,63H80.78"></path></g></svg>

I then tried instead using the Code widget to add the SVG code to - this allowed the group IDs to remain their original ones from the Illustrator layers (‘shapes’ and ‘lines’) but my page CSS still didn’t change anything.

Here is some sample CSS animation I am trying to apply to this SVG, to create a fade-in - the background-red is just there as I was trying to see if I could effect any visual change, which hasn’t worked so far.

/* The animation code */
@keyframes example {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* The element to apply the animation to */
[data-id="lines"] {
  animation-name: example;
  animation-duration: 10s;
  opacity: 0;
  background-color: red !important;
}

Am I completely misunderstanding how this works? Is there a better way, or something additional I need to do in order to target and edit/animate the contents of an SVG in Readymag?