There are two distinct types of components that I am working with, which I will refer to as .a and .b.
It is possible that these components have been assigned certain CSS animations. I do not have the ability to control these keyframes, whether they are activated, or what they are animating.
One common animation that may be applied is opacity. However, for my .a elements, I want the opacity to remain at a specific value, let's say 1, regardless of any ongoing animations.
Let's consider the following scenario, where three cases are examined:
- No animations are assigned to my elements
- An animation exists, but it does not involve animating
opacity - An animation exists that includes animating the
opacity
div {
/* Some placeholder styles for visibility */
display: inline-block;
width: 5em; height: 5em;
background: purple;
}
[class*='ani'] { animation: a 1s ease-out infinite alternate }
.ani--one { animation-name: ani-one }
@keyframes ani-one { to { transform: scale(.5) } }
.ani--two { animation-name: ani-two }
@keyframes ani-two {
to {
opacity: 0;
background: orange;
}
}<div class='a'></div>
<div class='b'></div>
<div class='a ani--one'></div>
<div class='b ani--one'></div>
<div class='a ani--two'></div>
<div class='b ani--two'></div>In the first two cases (1 = no keyframe animation and 2 = keyframe animation, but not affecting opacity) no action is required.
However, in the third case, it is crucial that the opacity of .a elements remains at 1, disregarding any ongoing animation effects solely on that property.
I must not remove the keyframe animation from the .a element as I want other properties (such as background, or any other property in general) to continue being animated.
Similarly, I cannot modify the animation itself as it should retain its original specifications, specifically animating the opacity for other elements (like .b).
Therefore, the main question is: how can I detect if the opacity property is being animated on an .a element, and if it is, how can I keep its value constant at 1 while still allowing other properties defined by the same keyframes to animate?
I am seeking a solution to this problem using vanilla JavaScript, without relying on any external libraries.