Force a property of an element to a certain value even as it's being animated
Now it just hit me that I could do it by adding an extra CSS keyframes animation:
@keyframes opacity-override { 0%, 100% { opacity: 1 } }
Now for all .a
elements that have an animation
set, I can add opacity-override
to the animation name and it should take care of things!
Additionally, I can use it to force opacity: 1
against styles that might be set on hover or on adding other classes, which is super convenient!
const _A = document.querySelectorAll('.a');
_A.forEach(a => {
let aname = getComputedStyle(a).animationName;
if(aname !== 'none') a.style.animationName = `${aname}, opacity-override`;
else a.style.animation = 'opacity-override 1s infinite';
});
div {
/* some dummy styles so we can see stuff */
display: inline-block;
width: 5rem; height: 5rem;
background: purple;
color: white;
font: 700 3em/5rem verdana;
text-align: center;
}
div:hover { opacity: .7 }
[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;
}
}
@keyframes opacity-override { 0%, 100% { opacity: 1 } }
<div class='a'>A</div>
<div class='b'>B</div>
<div class='a ani--one'>A</div>
<div class='b ani--one'>B</div>
<div class='a ani--two'>A</div>
<div class='b ani--two'>B</div>