I have an animation for my button to slowly fade in. They have a default opacity of 0 and the animation will set them to a value of 1. But at the end of the animation they pop back into 0.
document.getElementById("username").style.animation = "fade 2s";
document.getElementById("password").style.animation = "fade 2s";
#username, #password {
animation-fill-mode: forwards;
display: none;
opacity: 0;
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}