Animation wont last on last setting

HTML-CSS
#1

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;
	}
}
#2

Dont know if this will make any difference but instead of from and to, have you tried 0% and 100%. Its probably the same anyway.

#3

Didnt solve the problem unfortunatly

#5