What is the best way to modify CSS animation property without causing any disruptions?

Question

What is the best way to modify CSS animation property without causing any disruptions?

Could you help me with modifying this CSS animation? I want to adjust the animation-iteration-count to 1 only when a certain property, status, is added to the element. Currently, the animation is not working as expected.

For 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>

html css

Answer 1

Answer №1

Here is a demonstration of how you can ensure that the animation completes before updating the animation-iteration-count:

I have introduced a CSS variable in the :root selector to store the iteration count, allowing us to target it with JavaScript as pseudo elements cannot be directly targeted.
I have provided two methods for adding the status class to the element - either by clicking on it or utilizing the original setTimeout function with a non-round second value (e.g., 1000, 2000, 3000, etc.).
The code includes detailed comments describing each step and action taken.

// Selects the div element.
const e = document.querySelector('div');
// Variable to track the iteration count, updated upon animationiteration event.
let iterationCount = 0;

// Function to monitor the iteration count.
function check_iteration_count() {
  // Listen for the animationiteration event on constant e element.
  e.addEventListener('animationiteration', () => {
    // Increments the iteration count after the current iteration completes.
    iterationCount++;
    // Once this function initiates the increment, reaching 1 signifies completion of one iteration.
    if (iterationCount === 1) {
      // Changes the CSS variable to the desired iteration count of 1 to halt the animation.
      document.documentElement.style.setProperty('--iteration-count', '1');
    }
  });
}

// When clicked.
e.addEventListener('click', (event) => {
  // Adds the status class to the div upon click.
  event.target.classList.add('status');
  // Executes the function to update the iterator.
  check_iteration_count();
});

// Original timeout function. Utilizes a non-exact second value.
setTimeout(() => {
  // Adds the status class to the div after timeout.
  e.classList.add('status');
  // Calls 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;
}


/* Highlighting the addition of status class */

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>Hello!</div>

Answer 2

Here is a demonstration of how you can ensure that the animation completes before updating the animation-iteration-count:

I have introduced a CSS variable in the :root selector to store the iteration count, allowing us to target it with JavaScript as pseudo elements cannot be directly targeted.
I have provided two methods for adding the status class to the element - either by clicking on it or utilizing the original setTimeout function with a non-round second value (e.g., 1000, 2000, 3000, etc.).
The code includes detailed comments describing each step and action taken.

// Selects the div element.
const e = document.querySelector('div');
// Variable to track the iteration count, updated upon animationiteration event.
let iterationCount = 0;

// Function to monitor the iteration count.
function check_iteration_count() {
  // Listen for the animationiteration event on constant e element.
  e.addEventListener('animationiteration', () => {
    // Increments the iteration count after the current iteration completes.
    iterationCount++;
    // Once this function initiates the increment, reaching 1 signifies completion of one iteration.
    if (iterationCount === 1) {
      // Changes the CSS variable to the desired iteration count of 1 to halt the animation.
      document.documentElement.style.setProperty('--iteration-count', '1');
    }
  });
}

// When clicked.
e.addEventListener('click', (event) => {
  // Adds the status class to the div upon click.
  event.target.classList.add('status');
  // Executes the function to update the iterator.
  check_iteration_count();
});

// Original timeout function. Utilizes a non-exact second value.
setTimeout(() => {
  // Adds the status class to the div after timeout.
  e.classList.add('status');
  // Calls 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;
}


/* Highlighting the addition of status class */

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>Hello!</div>

What is the best way to modify CSS animation property without causing any disruptions?

Answer №1

Similar questions

"Drag and drop elements that automatically snap to a grid and move with

Adjust the input value with CSS when hovering

`Is it possible to animate the rotation of an image within an input control?`

Determining the Number of Sub-Menu Items Using jQuery without Reliance on CSS Classes

Tips for expanding a script that relocates a logo into a navigation consisting of several unordered lists

Is the in-app browser of WeChat able to support self-signed HTTPS URLs?

Determining the top element displayed in a div: A guide

mentioning a JSON key that includes a period

Troubles with Sizing in Twitter Bootstrap Modal

Adding Data to a Database Using Ajax with PHP

Text in React Native exceeding one line is causing it to extend beyond the screen boundaries

Is there a distinction between the values 'normal' and 'stretch' in the CSS property known as 'align-content'?

What is the best way to retrieve the dates for the current month as well as the following month

The Flask server push appears to be functioning correctly, yet the EventSource.onmessage event is not triggering as expected

Shift the plus-minus icon on the bootstrap accordion all the way to the right side

How about displaying the Ajax response as an image?

Ways to eliminate the .html extension when someone accesses your static website

Align list items in the center horizontally regardless of the width

Floating and scrolling navigation bar not functioning properly in bootstrap framework

Utilizing commas in JavaScript