Use @keyframes to create image slide

Hi,

So I’ve just started my tribute page. I’ve added an image and would like to have a slide, using 3 images. The slide doesn’t have to be anything fancy, I want it to move from one image to another every 3 seconds. Below is an example of my code(CSS), which isn’t working:

#image{
max-width:100%;
height:auto;
border-radius: ;
position: relative;
border-color: white;
margin:0px;
display:block;
animation-name: imgchange;
animation-duration: 3s;
animation-iteration-count:infinite;

}
@keyframes imgchange {
0%{
background-image:url(‘https://upload.wikimedia.org/wikipedia/commons/6/6c/02-18-1961_17865_Ella_Fitzgerald_(6741938935).jpg’);
}
100% {
background-image:url(‘https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQYgAHf8XpHPgX8e9ZzqDzW0jJhTtakn8Td2A&usqp=CAU’);
}
}

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.