Image slider not loading when page first loads in.

So I used the code:

								<div id="outerdiv">
									<div id="innerdiv">
										<figure>
										<img src="images/image1.jpg" alt="photos01" width="800px" height="600px"/>
										<img src="images/image2.jpg" alt="photos02" width="800px" height="600px"/>
										<img src="images/image3.jpg" alt="photos03" width="800px" height="600px"/>
										<figure>
									</div>
								</div>

and the css codes:

@keyframes slider { 0% {left:0px; top:0px;} 25% {left:0px; top:0px;} 33% {left:-800px; top:0px;} 58% {left:-800px; top:0px;} 67% {left:-1600px; top:0px;} 92% {left:-1600px; top:0px;} 100% {left:-2400px; top:0px;} }

#outerdiv { position: relative; left: 0px; width: 798px; height: 400px; overflow: hidden; }

#innerdiv { position: relative; width: 3200px;

animation-name: slider;
animation-duration: 20s;

animation-iteration-count: infinite; }

So when I load the page the slider doesn't appear, but after refreshing the page it does appear. I'm editing a website that is already been coded and I've adding this code to it. Does anyone has any ideas to try fix this.

(edit): So I deleted the <figure> and that fixed the problem.