我们可以将 CSS 关键帧动画限制在一个范围内吗

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.

Answer 2

Here is a JSS approach (you will need object-hash for that).

The following example shows how to define different animations with respective unique ID based on transform: scale(n) . For that purpose, define a function which returns the keyframes and its ID. The keyframes ID is a custom string suffixed with a hash of the function options (eg the scale factor).

(Be careful of CSS custom identifier, eg do not include a . in your ID. See MDN: < custom-ident > .)

import hash from "object-hash";

const keyFramesScale = (options = {}) => {

    let { transforms, id, scale } = options;
    transforms = transforms || "";
    scale = scale || 1.25;

    const keyFramesId = `scale${id ? "-" + id : ""}-${hash(options).substring(0, 6)}`;
    const keyFrames = {
        [`@keyframes ${keyFramesId}`]: {
            "100%": {
                transform: `scale(${scale}) ${transforms}`,
            },
            "0%": {
                transform: `scale(1) ${transforms}`,
            }
        }
    };

    return [keyFramesId, keyFrames];
};

How to use it:

const [scaleUpId, keyFramesScaleUp] = keyFramesScale({ scale: 1.25, transforms: "rotate(-30deg)", id: "up" });
const [scaleDownId, keyFramesScaleDown] = keyFramesScale({ scale: 0.75, transforms: "rotate(-30deg)", id: "down" });

// scaleUpId = "scale-up-c61254"
// scaleDownId = "scale-down-6194d5"
// ...

<tag style={{
    ...keyFramesScaleUp,
    ...keyFramesScaleDown,
    ...(!hasTouchScreen && isActive && !isClicked && {
        animation: `${scaleUpId} 0.5s infinite alternate linear`,
        "&:hover": {
            animation: "none",
        },
    }),
    ...(isClicked && {
        animation: `${scaleDownId} .25s 1 linear`,
    }),
}} />

Of course, you can write a more generic function that hashes the whole key frames and assign it an ID based on that.