My HTML code is supposed to display one image fading into another, but the issue I'm facing is that the new image appears before the previous one has completely faded out. Can someone please help me identify what's wrong with my code?
<!doctype html>
<html>
<head>
<title>Interactive Alphabet Learning</title>
<style>
#crossfade > img {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 156s linear infinite 0s;
-moz-animation: imageAnimation 156s linear infinite 0s;
-o-animation: imageAnimation 156s linear infinite 0s;
-ms-animation: imageAnimation 156s linear infinite 0s;
animation: imageAnimation 156s linear infinite 0s;
}
... (omitted for brevity)
</style>
</head>
<body style="background-color:yellow">
<h1 style="color:black; text-align:center; font-family:Comic Sans MS">Interactive Alphabet Learning</h1>
<hr style="border-color:#E30B5D">
<div id="crossfade">
... (omitted for brevity)
</div>
</body>
</html>