I am trying to get a series of li to animate when a div is clicked. I have tried a few different things but I am not able to get it to work. For example I have looked at toggling .animate based on a MDN article but this didn't work. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationstart_event
On StackOverflow another user had this problem and a user suggested using controlAnimation()
The result must be repeatable every time the div is clicked.
document.getElementById("clickable").addEventListener("click", controlAnimation);
function controlAnimation() {
document.getElementById('menu-main-menu').style.animation="fadeInMenu";
}#menu-main-menu li {
border-bottom: solid 1px #999;
opacity: 0;
-webkit-animation: fadeInMenu 0.5s 1;
animation: fadeInMenu 0.5s 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#menu-main-menu li:nth-child(5n+1) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
#menu-main-menu li:nth-child(5n+2) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
#menu-main-menu li:nth-child(5n+3) {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#menu-main-menu li:nth-child(5n+4) {
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
#menu-main-menu li:nth-child(5n+5) {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
/* Animation steps */
@-webkit-keyframes fadeInMenu {
0% {
opacity: 0.0;
transform: translateY(16px);
}
100% {
opacity: 1.0;
}
}
@keyframes fadeInMenu {
0% {
opacity: 0.0;
transform: translateY(16px);
}
100% {
opacity: 1.0;
}<div id="clickable" >Click me</div>
<br>
<ul id="menu-main-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>Note that in your code, the elements that have "animation" css rules are the LI elements. So changing the animation property of the UL's style won't work.
Here I changed your CSS a bit so that you can give the UL the class of "animate" and the child LIs will animate. When you press the button it removes that class, and then using a setTimeout re-adds it, it should reset and replay the animation.
document.getElementById("clickable").addEventListener("click", controlAnimation);
function controlAnimation() {
const menu = document.querySelector('#menu-main-menu');
menu.classList.remove('animate');
setTimeout(() => {
menu.classList.add('animate');
}, 0);
}#menu-main-menu li {
border-bottom: solid 1px #999;
}
#menu-main-menu.animate li {
opacity: 0;
-webkit-animation: fadeInMenu 0.5s 1;
animation: fadeInMenu 0.5s 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#menu-main-menu.animate li:nth-child(5n+1) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
#menu-main-menu.animate li:nth-child(5n+2) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
#menu-main-menu.animate li:nth-child(5n+3) {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#menu-main-menu.animate li:nth-child(5n+4) {
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
#menu-main-menu.animate li:nth-child(5n+5) {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
/* Animation steps */
@-webkit-keyframes fadeInMenu {
0% {
opacity: 0.0;
transform: translateY(16px);
}
100% {
opacity: 1.0;
}
}
@keyframes fadeInMenu {
0% {
opacity: 0.0;
transform: translateY(16px);
}
100% {
opacity: 1.0;
}<div id="clickable" >Click me</div>
<br>
<ul id="menu-main-menu" class='animate'>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>try adding a animation time to your document.getElementById('menu-main-menu').style.animation="fadeInMenu"; so like: document.getElementById('menu-main-menu').style.animation="fadeInMenu 2s";
(change the 2s to your animation time)