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

The alignment of the background images is off

How can I retrieve the content from an iframe whenever its state is altered using jQuery?

Issue with Sass @use failing to load partial

Examples of how to specify a child class in CSS

Expanding the `div` element to visually occupy the entire vertical space

Locate all elements containing a specific text string

Ways to animate a div downward when the mouse hovers over it using jQuery

If you click outside of a Div element, the Div element will close

Evaluating CSS Specificity

What could be causing mobile phones to overlook my CSS media query?

How can screen readers be alerted about freshly loaded content through ajax?

What are some effective strategies for preventing CSS duplication?

What is the process for inserting an image into a table using el-table and el-table-column components in Vue.js while utilizing ui-elements?

The alignment of bullets in CSS property list-style-position is off

Issue with unordered list in the footer overlapping other elements

Having difficulty changing the visibility of a div with Javascript

Ways to make ionic slides adhere to column width

Is there a way to handle specific email format designs with PHP?

Display information from a .js file onto an HTML webpage

Issues with the OnChange function not properly functioning in duplicate input fields