How to change CSS animation property without breaking it? - html

Question

I have the following CSS animation. I'd like to change the animation-iteration-count to 1 when the element in question has the property status added. Right now the animation breaks.
Example:
setTimeout(() => {
const e = document.querySelector('div')
e.classList.add('status')
}, 5000)
div {
position: relative;
}
div::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom: 2px solid #00849b;
animation-name: border-animation;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
div.status::before {
animation-name: border-animation;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes border-animation {
from {
width: 0;
}
to {
width: 100%;
}
}
<div>Hiiiiiiiii!</div>

Answer 1

Here's an example of what you can do to make sure the animation finishes before the animation-iteration-count is updated:
Added a CSS var to the :root for the iteration count so we can target it using JS since pseudo elements are not targetable.
I've added two ways that can add the status class to the element - click or using the original setTimeout with a value that is not on an exact second (1000,2000,3000 etc.)
The code is commented with all that's happening.
// The div.
const e = document.querySelector('div');
// Variable to hold the iteration count. This updates on the animationiteration event.
let iterationCount = 0;
// Function to check the iteration.
function check_iteration_count() {
// Listen to the animationiteration on the constant e element
e.addEventListener('animationiteration', () => {
// Updates the iteration count AFTER the current iteration is finished.
iterationCount++;
// Since this function starts the increment, once the iteration finishes, it will be 1.
if (iterationCount === 1) {
// updates the CSS var to the desired iteration count of 1 to stop the animation.
document.documentElement.style.setProperty('--iteration-count', '1');
}
});
}
// On click.
e.addEventListener('click', (event) => {
// Adds the status class to the div.
event.target.classList.add('status');
// Now run the function to increment the iterator.
check_iteration_count();
});
// Original timeout function. Uses a value that's not a direct second.
setTimeout(() => {
// Adds the status class to the div.
e.classList.add('status');
// Runs the function to update the iterator.
check_iteration_count();
}, 5100);
:root {
--iteration-count: infinite;
}
div {
position: relative;
}
div::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom: 2px solid #00849b;
transition: border-bottom .3s ease;
animation-name: border-animation;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: var(--iteration-count);
animation-fill-mode: forwards;
}
/* just for fun to show the status class was added */
div.status::before {
border-bottom-color: red;
}
div.status::before {
animation-name: border-animation;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: var(--iteration-count);
animation-fill-mode: forwards;
}
#keyframes border-animation {
from {
width: 0;
}
to {
width: 100%;
}
}
<div>Hiiiiiiiii!</div>