How To Add More Than One Css Animation

The world seems obsessed with this thought that users don't want to see loading spinners if the loading process will only take a fraction of 2nd. A few years agone, I demonstrated that this kind of delay tin can exist accomplished with a simple CSS animation-delay property; but, in that post, I causeless that the loading indicator itself had no animation. That said, even if the loading indicator does accept an animation, we can still use the same technique past applying multiple animation @keyframes to the same loading indicator using CSS.

Run this demo in my JavaScript Demos projection on GitHub.

View this code in my JavaScript Demos project on GitHub.

In my previous postal service, I used the blitheness-delay to keep the loading indicator at opacity:0 for a few hundred milliseconds. And then, I faded the indicator into view using opacity:1 and just left it there as a static chemical element on the page.

In reality, my loading indicator, itself, has some sort of "pulsing" animation to information technology - an blitheness that has to repeat infinitely. As such, I tin can't include the opacity in that pulse @keyframes otherwise the indicator will fade in-and-out infinitely. Luckily, nosotros can apply multiple @keyframes to a unmarried element. And then, we can apply comma-delimited sets of properties to ascertain the behavior of each individual animation.

This ways that we tin can have one @keyframes that defines the "fade in" blitheness which runs but once. And, we tin can use a separate @keyframes to define the "pulse" animation which volition run (iterate) infinitely. Then, we tin utilise the blitheness-delay on both animations to proceed the loading indicator hidden briefly before it fades in and starts pulsing ad infinitum.

To see this in action, I've put together a uncomplicated jQuery demo in which I can add together and remove a loading spinner to and from the DOM (Document Object Model), respectively. The spinner and then uses two different blitheness @keyframes, one that faces the indicator in one time, and one that translates it horizontally back-and-along forever:

                  <!doctype html> <html lang="en"> <head> 	<meta charset="utf-eight" /> 	<title> 		Applying Multiple Blitheness Keyframes To A Loading Indicator In CSS 	</title>  	<link rel="stylesheet" type="text/css" href="./demo.css" /> </head> <body>  	<h1> 		Applying Multiple Animation Keyframes To A Loading Indicator In CSS 	</h1>  	<p> 		<push grade="activity action--testify"> 			Show loading spinner 		</button> 		<button class="action action--hide"> 			Hide loading spinner 		</button> 	</p>  	<div class="ingress"> 		<!-- Spinner will be injected here. --> 	</div>  	<template form="template"> 		<div class="spinner"> 			Loading.... 		</div> 	</template>  	<style type="text/css"> 		/* 			The first animation is here to provide a DELAYED RENDERING of the injected 			DOM chemical element. This allows us to inject the spinner right abroad, only just show 			it the user if the content takes longer than "Xms" to load. 		*/ 		@keyframes spinner-fade { 			from { 				opacity: 0.0 ; /* In DOM, but visually hidden. */ 			} 			to { 				opacity: ane.0 ; /* In DOM, and visible. */ 			} 		} 		/* The second animation is here to provide the ongoing pulsing of the spinner. */ 		@keyframes spinner-pulse { 			0%, 100% { 				transform: translateX( 0px ) ; 			} 			50% { 				transform: translateX( 10px ) ; 			} 		}  		.spinner { 			/* 				For our animation, we're going to attach Ii Unlike animation 				keyframes using sets of comma-delimited settings. The first setting in 				each belongings volition be applied to our FADE animation; the 2nd setting 				in each property will be applied to our PULSE blitheness. Nosotros're using 2 				animations because we want the kickoff one (the fade in) to only run once 				and we want the 2nd i (the pulse) to run infinitely. 			*/ 			animation-proper noun: 				spinner-fade, 				spinner-pulse 			; 			animation-iteration-count: 				ane, /* The FADE animation should only run one time and Make full forward. */ 				infinite /* The PULSE animation should repeat forever. */ 			; 			/* 				For the purposes of the demo, nosotros're going to apply a Big DELAY so that 				the overall consequence is easier to see. This 2000ms represents the time that 				the spinner is in the DOM, but withal hidden from the user. 			*/ 			animation-filibuster: 2000ms ;   /* Same setting for both animations. */ 			blitheness-duration: 500ms ; /* Same setting for both animations. */ 			animation-fill-mode: both ; /* Same setting for both animations. */ 		} 	</style>  	<script type="text/javascript" src="../../vendor/jquery/iii.6.0/jquery-3.6.0.min.js"></script> 	<script type="text/javascript">  		var showButton = $( ".activeness--testify" ); 		var hideButton = $( ".action--hibernate" ); 		var ingress = $( ".ingress" ); 		var template = $( ".template" );  		showButton.click( 			function injectSpinner() {  				ingress.append( template.prop( "content" ).firstElementChild.cloneNode( true ) );  			} 		); 		hideButton.click( 			office removeSpinner() {  				ingress.empty();  			} 		);  	</script>  </body> </html>

As yous can see, our first @keyframes uses opacity to manage the visibility of the loading indicator. And, our second @keyframes uses transform to give the loading indicator a little razzle-dazzle one time it's rendered to the user. Inside of our .spinner style block, we then use a comma-delimited value for our animation-iteration property in society to brand sure that the fade-in blitheness merely runs once while the razzle-dazzle animation runs infinitely.

Now, if nosotros run this JavaScript demo in the browser and inject the loading indicator, you can see that information technology delays for 2-seconds before fading in and repeating:

How absurd is that? It works like a charm. By applying multiple CSS animation @keyframes to the aforementioned element, nosotros go the do good of the loading indicator while also getting - what I'm told is - a perceived performance improvement past non showing the loading indicator during a sub-2nd loading workflow. And, we didn't fifty-fifty demand React Suspense!

Want to apply code from this post? Check out the license.

Source: https://www.bennadel.com/blog/4094-applying-multiple-animation-keyframes-to-a-loading-indicator-in-css.htm

Posted by: eddythavess.blogspot.com