I'm currently exploring the world of animating svg objects using CSS.
I have successfully learned how to animate a path with:
@keyframes stroke_fill {
0% {
fill: white;
}
50% {
fill: white;
stroke-dashoffset: 0;
}
100% {
fill: black;
stroke-dashoffset: 0;
}
}
.animation{
animation: stroke_fill 4s ease forwards;
stroke-dasharray: 324.774;
stroke-dashoffset: 324.774;
}
When paths are grouped together, they are wrapped in a <g> tag.
Is it feasible to animate the <g> tag?
It would be convenient if all children within the group could share the same animation and duration.
Currently, assigning individual classes to each path is time-consuming when working with complex svg files.
Animating by group would greatly streamline the process.
Check out this Fiddle for reference: https://jsfiddle.net/vvvwcrdy/