I am trying to build a simple web app using HTML/CSS and Javascript/JQuery that counts to 10 and animates and displays the numbers one after another. I have the animations working well but I haven't been able to figure out the best way to update and rerun the animation in Javascript using JQuery.
All I want the program to do is run the animation "grow-number", then iterate the number in the h1 .anim tags and then display the same animation for each number in sequence starting from 1 to 10 so that the browser will show an animated counting sequence.
I tried using setInterval and using callbacks but I definitely did it wrong so I won't include those failures in my code.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font: normal 200px sans-serif;
font-family: 'Quicksand', sans-serif;
color: orange;
}
.content-area {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: green;
min-height: 100vh;
/*opacity:0%;*/
}
.anim {
transform: scale(0);
opacity: 0;
/*this animation SHOULD PROBABLY be called with javascript
or jquery but I have NOT had any luck getting it to work and
iterating throug the numbers. I uncommented here just to show
what it looks like in general*/
animation: grow-number 4s 2s 10;
/*animation-duration:4s;
animation-name: grow-number;
animation-delay:2s;
animation-iteration-count:10;*/
}
@keyframes grow-number {
0% {
transform: scale(0);
opacity: 0%;
}
10% {
opacity: 100%;
}
19% {
transform: scale(2.25);
color: orange;
}
20% {
transform: scale(2);
color: blue;
}
80% {
transform: scale(2);
color: blue;
}
90% {
opacity: 100%;
color: orange;
}
100% {
transform: scale(0);
color: orange;
opacity: 0%;
}
}<!DOCTYPE html>
<html>
<head>
<title>Count to 10!</title>
<!--jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
//this needs to iterate and rerun the grow-number animation
$(".anim").text(1);
$(".anim").css({
'animation': 'grow-number 4s 2s'
});
</script>
<!--Font-->
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap" rel="stylesheet">
<!--STYLESHEETS-->
<link rel="stylesheet" href="countingdemo.css">
</head>
<body>
<div class="content-area">
<h1 class="anim">0</h1>
</div>
</body>
</html>Can someone help me with javascript/jquery code that works.
Please try this,
Please wait somewhile I adjusting the animation delay between countings.