Are CSS animations still triggered even when the element is not visible?

Question

Are CSS animations still triggered even when the element is not visible?

I currently have a loading indicator element that is consistently displayed on my webpage. It can be shown or hidden by adding or removing a specific class that adjusts its opacity and z-index. The element itself contains an image with a CSS animation.

My concern is that this setup may not be the most efficient for the page, as the animation could potentially continue running even when the loader is not visible.

Approaches I've Explored

I attempted to modify the animation so it only runs when the element has the visible class applied. However, this resulted in a choppy effect because the animation halted immediately upon class removal, without allowing the loader to fade out smoothly. Additionally, incorporating a transition into the animation did not yield any noticeable changes.

css animation

Answer 1

Answer №1

Absolutely, they do indeed. For further clarification, please refer to the following example on JS FIDDLE ==> JS FIDDLE DEMONSTRATING CHANGE

css

@keyframes anim{
    0%{margin-left:0;}
    100%{margin-left:80%;}
}
@-webkit-keyframes anim{
    0%{margin-left:0;}
    100%{margin-left:80%;}
}
h3{
    float:left;
    position:absolute;
}
div{
    visibility:hidden;
    background:black;
    width:50px;
    height:50px;
    float:left;
    animation: anim 5s;
    -webkit-animation: anim 5s infinite; /* Safari and Chrome */
}

html

<div id="div">
   Div
</div>
<h3></h3>

js

setInterval(function() {
    jQuery('h3').text('Margin is:'+ jQuery('div').css('margin-left'))
},1000);

The above code snippet illustrates the outcome within the h3 element.

Answer 2

Absolutely, they do indeed. For further clarification, please refer to the following example on JS FIDDLE ==> JS FIDDLE DEMONSTRATING CHANGE

css

@keyframes anim{
    0%{margin-left:0;}
    100%{margin-left:80%;}
}
@-webkit-keyframes anim{
    0%{margin-left:0;}
    100%{margin-left:80%;}
}
h3{
    float:left;
    position:absolute;
}
div{
    visibility:hidden;
    background:black;
    width:50px;
    height:50px;
    float:left;
    animation: anim 5s;
    -webkit-animation: anim 5s infinite; /* Safari and Chrome */
}

html

<div id="div">
   Div
</div>
<h3></h3>

js

setInterval(function() {
    jQuery('h3').text('Margin is:'+ jQuery('div').css('margin-left'))
},1000);

The above code snippet illustrates the outcome within the h3 element.

Answer 3

Answer №2

Uncertain about whether animations continue to occur on a hidden element, one can utilize the animation-iteration-count property to conclude the animation after a specified number of iterations.

To conceal the loader when not in use, employ class="is-hidden".
Upon application of .is-hidden to the loader, modify the spinner's animation-iteration-count from infinity to a set value like 5.

This action will result in the spinner completing exactly 5 additional rotations before ceasing the animation. These rotations occur while the loader is fading out. Adjust the number of iterations accordingly if 5 spins are insufficient to cover the fade-out duration.

VIEW LIVE DEMO (toggle .is-hidden on .loader)

/* CSS */

@keyframes spin {
  to { transform: rotateZ(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }  
  to   { opacity: 0; }
}

.loader {
  /* loader styles... */

  animation: fadeIn 1s forwards;
}

.spinner {
  /* spinner styles... */

  animation: spin 0.5s linear infinite;
}

.loader.is-hidden {
  animation: fadeOut 1s forwards;
}

.loader.is-hidden .spinner {
  animation-iteration-count: 5;
}

Answer 4

Uncertain about whether animations continue to occur on a hidden element, one can utilize the animation-iteration-count property to conclude the animation after a specified number of iterations.

To conceal the loader when not in use, employ class="is-hidden".
Upon application of .is-hidden to the loader, modify the spinner's animation-iteration-count from infinity to a set value like 5.

This action will result in the spinner completing exactly 5 additional rotations before ceasing the animation. These rotations occur while the loader is fading out. Adjust the number of iterations accordingly if 5 spins are insufficient to cover the fade-out duration.

VIEW LIVE DEMO (toggle .is-hidden on .loader)

/* CSS */

@keyframes spin {
  to { transform: rotateZ(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }  
  to   { opacity: 0; }
}

.loader {
  /* loader styles... */

  animation: fadeIn 1s forwards;
}

.spinner {
  /* spinner styles... */

  animation: spin 0.5s linear infinite;
}

.loader.is-hidden {
  animation: fadeOut 1s forwards;
}

.loader.is-hidden .spinner {
  animation-iteration-count: 5;
}

Are CSS animations still triggered even when the element is not visible?

Answer №1

Answer №2

Similar questions

What steps should I take to align the name and email fields next to the text on the left and the button on the right?

Repair the masthead background during overscroll

Trouble with Bootstrap 3's nav-justified feature not displaying correctly upon window expansion

Glowing effects on svg shapes

Strangely Bizarre CSS Quirk

What is the best way to insert a space between my element and pseudo-element?

What is the best way to increase the size of this text when an image is hovered over?

Discrepancy in Line Spacing in Internet Explorer 9 when Working with TextAreas

Javascript editing enhancement for real-time changes

The CSS selector ">" is not functioning correctly, and neither is the "~" selector

What is the best method to eliminate excess space between images on a webpage using CSS?

"Transforming a static navbar to a fixed position causes the page to jump

Move your cursor over an image to reveal another image on top without impacting the image underneath by using background-image

A step-by-step guide to creating adorable rounded corners in a DIV element

Utilizing Angular 2 Animations with the ngOnInit Lifecycle Hook

Using React to organize content within a material-ui layout efficiently

How can I automatically scroll to an anchor element once CSS animation has finished

Content in tab remains stagnant

Transforming the font landscape with Twitter Bootstrap 3's Glyphicons

How can I extract a substring from a URL and then save it to the clipboard?