Trying to make an image swapper using only CSS has been a smooth process so far with the animation feature effortlessly handling the image swaps. However, the challenge arises when the images themselves are not the perfect size and I'm using a div with an animation that changes background and sizes the div to fit the entire screen:
width: 100%;
height: auto;
This results in the images not being fitted on the screen as they usually would be if using the HTML img tag. Instead, it creates multiple copies of the image to fill in the remaining space.
The question now is, how can I make the animation force the width of the images to be 100%?
.animation {
animation: imgswaper 10s infinite alternate;
width: 100%;
height: 300px;
}
@keyframes imgswaper {
0% {
background-image: url(https://www.collinsdictionary.com/images/full/apple_158989157.jpg);
}
1% {
background-image: url(https://www.collinsdictionary.com/images/full/apple_158989157.jpg);
}
50% {
background-image: url(https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?202207110316);
}
51%{
background-image: url(https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?202207110316);
}
100% {
background-image: url(https://www.collinsdictionary.com/images/full/apple_158989157.jpg);
}
}<!DOCTYPE html>
<html lang="en>>
<head>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div class="animation"></div>
</body>
</html>