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;
}
>Solution :
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.