Can we restrict CSS keyframe animations to a scope

Question

I wonder if it's possible to restrict keyframe animations to a scope based on classnames. The benefit would be to be able to use the same animation-name multiple times without getting issues. I couldn't find any infos about that..

In case it's not possible: are there any best practices to handle naming conflicts?

Answer 1

I used to use something like SCSS to generate automatically created names for my keyframes. They might not be as descriptive, but they ensure uniqueness. Something like:

$animation-id-count: 0 !global;

@function animation-id {

  $animation-id-count: $animation-id-count + 1;
  @return animation-id-#{$animation-id-count};

}

After this, just use the function in your code like this:

.class {

  $id: animation-id();

  @keyframes #{$id}{
    ...keyframes
  }

  animation: $id 1s infinite;

}

That way if you insert it anywhere else in your SCSS or move it, it will still match the right animation, and it stops namespaces from overlapping in any way.