allow CSS selectors other than id

[Sam Muirhead]

Currently the script only creates animations for id selectors, and it requires that every animated element in the document has an id.
Non-id selectors can still be used in the anime.js timeline, eg:

.add({
    targets: 'g > circle'
})

This would successfully select all circle elements that are direct children of g elements:

<g>
<!-- these circles would have a valid CSS animation created for them, as they have ids-->
  <circle id="circle-a"/>
  <circle id="circle-b"/>
  <circle id="circle-c"/>
</g>

<g>
<!-- these circles would _not_ have a valid CSS animation created for them -->
  <circle/>
  <circle/>
  <circle/>
</g>

My current approach could result in needlessly repetitive CSS, eg. if there were many g > circle elements:

#circle-a { animation-name: circle-a-anim; }
@keyframes circle-a-anim {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}
#circle-b { animation-name: circle-b-anim; }
@keyframes circle-b-anim {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

. . . 

#circle-y { animation-name: circle-y-anim; }
@keyframes circle-y-anim {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}
#circle-z { animation-name: circle-z-anim; }
@keyframes circle-z-anim {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

Compared to:

g > circle { animation-name: g-circle-anim; }
@keyframes g-circle-anim {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

My current approach also requires that you go through your document and add ids to every element referenced in the anime.js timeline before running the script, which is a bit of a faff.

[Sam Muirhead]

One way of avoiding needlessly repetitive CSS, whether this change is made or not, would be to check if any @keyframes blocks are identical, merge them into one, and update the animation-name references.

#circle-a, #circle-b, #circle-c, #circle-d, #circle-e, #circle-f, #circle-g, 
#circle-h, #circle-i, #circle-j  { animation-name: opacity-anim-a; }
@keyframes opacity-anim-a {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

Issues to consider in this case:

• Does this check-and-merge happen before converting the targets object into a string for manipulating into CSS syntax? (probably, yes)
• What name should be given to the new animation? Something short and meaningless like a-anim, or concatenate something potentially very long like circle-a-circle-b-circle-c-circle-d-circle-e-circle-f-circle-g-circle-h-circle-i-circle-j-anim, or maybe a name created from the animated properties, eg. opacity-transform-scale-anim-a?