Is it possible to confine CSS keyframe animations within a specific scope?

Question

Is it possible to confine CSS keyframe animations within a specific scope?

Is it feasible to limit keyframe animations to a specific scope defined by classnames? This could make it easier to reuse the same animation names without any conflicts. I couldn't locate any information on this topic.

If restricting keyframe animations based on classnames isn't possible: what are some recommended approaches for managing naming conflicts?

css scope css-animations

Answer 1

Answer №1

Back in the day, I used SCSS to automatically generate unique names for my keyframes. They may not have been very descriptive, but at least they were guaranteed to be one-of-a-kind. Here's a snippet of what that looked like:

$animation-id-count: 0 !global;

@function animation-id {

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

}

All you had to do after setting this up was use the function in your code, as shown below:

.class {

  $id: animation-id();

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

  animation: $id 1s infinite;

}

By incorporating this method, you could easily ensure that your animations remained correctly linked no matter where they were placed or moved within your SCSS files. Plus, it prevented any potential namespace conflicts from occurring.

Answer 2

Back in the day, I used SCSS to automatically generate unique names for my keyframes. They may not have been very descriptive, but at least they were guaranteed to be one-of-a-kind. Here's a snippet of what that looked like:

$animation-id-count: 0 !global;

@function animation-id {

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

}

All you had to do after setting this up was use the function in your code, as shown below:

.class {

  $id: animation-id();

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

  animation: $id 1s infinite;

}

By incorporating this method, you could easily ensure that your animations remained correctly linked no matter where they were placed or moved within your SCSS files. Plus, it prevented any potential namespace conflicts from occurring.

Answer 3

Answer №2

It appears that the answer to the main question remains negative.

If you're looking for an option besides @somethinghere's response, you could consider utilizing Sass's predefined unique-id feature:

@use "sass:string";

.class {
  $id: string.unique-id();

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

  animation: $id 1s infinite;
}

Answer 4

It appears that the answer to the main question remains negative.

If you're looking for an option besides @somethinghere's response, you could consider utilizing Sass's predefined unique-id feature:

@use "sass:string";

.class {
  $id: string.unique-id();

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

  animation: $id 1s infinite;
}

Answer 5

Answer №3

Here is a unique approach using JSX (make sure to have object-hash for this).

This example demonstrates how to create distinct animations with individual IDs based on transform: scale(n). To achieve this, define a function that generates the keyframes along with its ID. The keyframes ID is a custom string appended with a hash of the function options, like the scale factor.

(Remember to avoid CSS custom identifier restrictions, such as not including a . in the ID. Refer to 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];
};

Implementation:

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`,
    }),
}} />

You can further optimize by creating a generic function that hashes the entire key frames and assigns it an ID accordingly.

EDIT

To illustrate the concept discussed above, here is a flexible approach. Initially, we define a general function that takes in an animation name (e.g., scale, pulse, etc.), its keyframes (which can be an object or a function), and optional keyframe parameters with default values.

import hash from "object-hash";

const createKeyFramesId = (id, keyFrames) => {
    return `${id}-${hash(keyFrames).substring(0, 6)}`;
};

const genericKeyFrames = (name, keyFrames, defaults = {}, options = {}) => {

    if (typeof keyFrames === "function") {
        // Merge defaults & options where options take precedence.
        keyFrames = keyFrames({ ...defaults, ...options });
    }

    const keyFramesId = createKeyFramesId(name, keyFrames);
    const keyFramesObject = {
        [`@keyframes ${keyFramesId}`]: keyFrames
    };
    return [keyFramesId, keyFramesObject];
};

Now, you can define various animations using this method. Usage remains the same as before.

export const keyFramesPulse = () =>
    genericKeyFrames("pulse", {
        "100%": {
            opacity: "1",
        },
        "0%": {
            opacity: "0.5",
        },
    });

export const keyFramesRotate = (options = {}) => {
    const defaults = {
        rotate: 360,
        transforms: "",
    };

    const rotateKeyFrames = ({ rotate, transforms }) => {
        return {
            "100%": {
                transform: `rotate(${rotate}deg) ${transforms}`,
            }
        }
    };

    return genericKeyFrames(`rotate`, rotateKeyFrames, defaults, options);
};

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

    const defaults = {
        scale: 1.25,
        transforms: ""
    };

    const scaleKeyFrames = ({ scale, transforms }) => {
        return {
            "100%": {
                transform: `scale(${scale}) ${transforms}`,
            },
            "0%": {
                transform: `scale(1) ${transforms}`,
            }
        }
    };

    return genericKeyFrames(`scale`, scaleKeyFrames, defaults, options);
};

Visual representation in DevTools:

https://i.sstatic.net/ldrhE.png

Answer 6

Here is a unique approach using JSX (make sure to have object-hash for this).

This example demonstrates how to create distinct animations with individual IDs based on transform: scale(n). To achieve this, define a function that generates the keyframes along with its ID. The keyframes ID is a custom string appended with a hash of the function options, like the scale factor.

(Remember to avoid CSS custom identifier restrictions, such as not including a . in the ID. Refer to 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];
};

Implementation:

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`,
    }),
}} />

You can further optimize by creating a generic function that hashes the entire key frames and assigns it an ID accordingly.

EDIT

To illustrate the concept discussed above, here is a flexible approach. Initially, we define a general function that takes in an animation name (e.g., scale, pulse, etc.), its keyframes (which can be an object or a function), and optional keyframe parameters with default values.

import hash from "object-hash";

const createKeyFramesId = (id, keyFrames) => {
    return `${id}-${hash(keyFrames).substring(0, 6)}`;
};

const genericKeyFrames = (name, keyFrames, defaults = {}, options = {}) => {

    if (typeof keyFrames === "function") {
        // Merge defaults & options where options take precedence.
        keyFrames = keyFrames({ ...defaults, ...options });
    }

    const keyFramesId = createKeyFramesId(name, keyFrames);
    const keyFramesObject = {
        [`@keyframes ${keyFramesId}`]: keyFrames
    };
    return [keyFramesId, keyFramesObject];
};

Now, you can define various animations using this method. Usage remains the same as before.

export const keyFramesPulse = () =>
    genericKeyFrames("pulse", {
        "100%": {
            opacity: "1",
        },
        "0%": {
            opacity: "0.5",
        },
    });

export const keyFramesRotate = (options = {}) => {
    const defaults = {
        rotate: 360,
        transforms: "",
    };

    const rotateKeyFrames = ({ rotate, transforms }) => {
        return {
            "100%": {
                transform: `rotate(${rotate}deg) ${transforms}`,
            }
        }
    };

    return genericKeyFrames(`rotate`, rotateKeyFrames, defaults, options);
};

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

    const defaults = {
        scale: 1.25,
        transforms: ""
    };

    const scaleKeyFrames = ({ scale, transforms }) => {
        return {
            "100%": {
                transform: `scale(${scale}) ${transforms}`,
            },
            "0%": {
                transform: `scale(1) ${transforms}`,
            }
        }
    };

    return genericKeyFrames(`scale`, scaleKeyFrames, defaults, options);
};

Visual representation in DevTools:

https://i.sstatic.net/ldrhE.png

Is it possible to confine CSS keyframe animations within a specific scope?

Answer №1

Answer №2

Answer №3

Similar questions

Tips on showcasing Javascript filter outcomes after at least 2 characters have been entered

The navigation bar remains fixed while the section heading fails to display properly

When using PHP code, the col-md-4 divs are positioned vertically instead of horizontally

Modify a section of an HTML text's formatting

The HTML code is failing to apply the style to all rows except for the first one in the sql query result

Float a div within text to be positioned vertically

Interactive Radial Menu Using Raphael JS

Switch the background color of the body when hovering over a link

I'm currently reviewing a CSS stylesheet for a React webpage, and I've noticed that several classes are utilizing content to dynamically create images. However, the display of content in VSCode appears as a bullet point

Connect the CSS file with the EJS file

Tips for creating a responsive width for a column of Bootstrap 4 buttons

Achieve a full-width span for a single item in a CSS grid without any alterations to the HTML code

Utilizing Bootstrap's styling features for iOS browser: customizing borders and text in HTML

Concealing and revealing an image with the onMouseOver and onMouseOut events - image quickly reemerges

Reaching out to the Edge: Enhancing the jQuery Slider Experience

Issue with Safari: Unable to trigger CSS :hover when tapping SVG element

The measurement of a table cell's height containing hidden overflow child elements

What could be the reason that my for loop executes only when it is embedded within a while loop?

Can a CSS <div> element have margins applied to it?

Resize a group of images to match the parent's width and height dimensions