How to add multiple images in CSS to create an animation?-CodePudding

I'm trying to add more images to my CSS so I can animate with @keyframe them but I am not sure how to add them. Can anyone help? I tried the whole div thing earlier but I didn't do it right.

HTML

 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <link href="style.css" rel="stylesheet" type="text/css"/>
 <title>CSS Animation</title>
 </head>

 <body>
 <main>

 <nav>
 <ul>
 <li class="one"><a href="#">Menu 1</a></li>
 <li class="two"><a href="#">Menu 2</a></li>
 <li class="three"><a href="#">Menu 3</a></li>
 </ul>
 </nav>
 </main>
 </body>
 </html>

CSS

@charset "utf-8";
/* CSS Document */


/*This is for the fresh farms image*/
 body
  {
 background-image: url("Image/FreshFarmsBG.jpg");
 background-repeat: no-repeat;
 background-size: cover;
 height: auto;

 }

CodePudding user response：

The correct answer was given in the comments already, but here is a quick example :

First you define the keyframes of the animation :

@keyframes animationName {
   0% { /* your CSS properties here */} 
   50% { /* your CSS properties here */} 
   100% { /* your CSS properties here */} 
}

You can define any CSS properties for each keyframe. The percentage value define the position of each keyframe.

Then you can use the animation on an element :

#mydiv{ animation: animationName 1s infinite;}

The result : You'll play a 3 keyframes animation, of a 1 second duration, in an infinite loop.