DanMad DanMad - 19 days ago 5
CSS Question

Valid to apply one css animation to multiple elements

I cannot find an answer to this question in any docs, nor can I see this question asked on Stack previously.

Is my css technically correct if I am applying the one animation to multiple selectors? I have seen questions asking if multiple animations can be applied to one selector, but not if the one animation can be applied to multiple selectors.

The code below shows how I'm proposing to use the one animation on multiple selectors:

.btn.tap.area:hover + .ring.container .ring.a,
.btn.tap.area:hover + .ring.container .ring.c {
animation-name: clockwise;
}
.btn.tap.area:hover + .ring.container .ring.b,
.btn.tap.area:hover + .ring.container .ring.d {
animation-name: counter-clockwise;
}

.btn.tap.area:hover + .ring.container .ring.a {
animation-duration: 1.33s;
}
.btn.tap.area:hover + .ring.container .ring.b {
animation-duration: 1s;
}
.btn.tap.area:hover + .ring.container .ring.c {
animation-duration: .67s;
}
.btn.tap.area:hover + .ring.container .ring.d {
animation-duration: .33s;
}

@keyframes clockwise {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes counter-clockwise {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}

Answer

Yes, applying one animation to many elements is perfectly valid. Not only does it save on things to do for the browser by not using duplicate animations, it saves kb in the CSS file itself. Plus if you only have to call one animation for many elements, if something is wrong it becomes easier to fix it later.

The closest thing I can find with only cursory research is:

The same @keyframes rule name may be repeated within an animation-name. Changes to the animation-name update existing animations by iterating over the new list of animations from last to first, and, for each animation, finding the last matching animation in the list of existing animations. If a match is found, the existing animation is updated using the animation properties corresponding to its position in the new list of animations, whilst maintaining its current playback time as described above. The matching animation is removed from the existing list of animations such that it will not match twice. If a match is not found, a new animation is created. As a result, updating animation-name from ‘a’ to ‘a, a’ will cause the existing animation for ‘a’ to become the second animation in the list and a new animation will be created for the first item in the list.

Taken from: https://drafts.csswg.org/css-animations/#animations

Where this would indicate that one repeated animation in one animation-name property is valid, I would assume that extending the rule to multiple elements is also valid. That and personal experience with applying one animation over multiple elements has never broken a page, caused any error or bug.


UPDATE:

This paragraph better describes the intent, and surmises that it is analogous with the background property (Which we know is valid to use one background across multiple elements.

4.2. The animation-name property

The animation-name property defines a list of animations that apply. Each name is used to select the keyframe at-rule that provides the property values for the animation. If the name does not match any keyframe at-rule, there are no properties to be animated and the animation will not execute. Furthermore, if the animation name is none then there will be no animation. This can be used to override any animations coming from the cascade. If multiple animations are attempting to modify the same property, then the animation closest to the end of the list of names wins. Each animation listed by name should have a corresponding value for the other animation properties listed below. If the lists of values for the other animation properties do not have the same length, the length of the animation-name list determines the number of items in each list examined when starting animations. The lists are matched up from the first value: excess values at the end are not used. If one of the other properties doesn’t have enough comma-separated values to match the number of values of animation-name, the UA must calculate its used value by repeating the list of values until there are enough. This truncation or repetition does not affect the computed value. Note: This is analogous to the behavior of the background-* properties, with background-image analogous to animation-name.

https://drafts.csswg.org/css-animations/#animation-name

Comments