How do you assign classnames to a @keyframe?

If you’re using one keyframe on one code, and then you have another code that uses keyframes. How will they be able to tell the difference between each other if you can’t assign classnames to them?
@PaulOB @Ray.H

This isn’t allowed, so what do you do?

.wraph @keyframes draw {

}

.wrapg @keyframes draw {

}

The keyframe in your code above is called ‘draw’ and you can use that keyframe by calling it’s animation name in the rule you want to apply the animation.

You can use the same keyframe wherever you want.

If you want a different animation then you would create a new keyframe with a new name and then call that new name from the rule you want it applied to.

To summarise: you create a keyframe and give it a name (e.g. draw). Then you call that keyframe with its animation name (i.e. animation-name: draw or in the shorthand format animation: draw 5s infinite etc…)

There is no need to attempt anything like you mentioned.

5 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.