How to animate a transition between 4 images in CSS

Question

I've looked on w3schools and found this snippet of code for animating a transition between 2 colours:

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

and

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

In order to animate a transition between 4 images I adapted into this:

@keyframes graphic {
        from {img src="Scene1.jpg" alt="Scene1";}
        to {img src="Scene2.jpg" alt="Scene2";}
        to {img src="Scene3.jpg" alt="Scene3";}
        to {img src="Scene4.jpg" alt="Scene4";}
    }

    .animation {
        width: 100px;
        height: 100px;
        position: relative;
        background-color: red;
        animation-name: graphic;
        animation-duration: 20s;
        animation-iteration-count: infinite;
    }

and used it as a div for this:

<div class="animation">
            animation
        </div>

However, all this does is place the text "animation" onto the webpage. Am I adapting this incorrectly or is there another method for animating transitions between images?

Yes, your method is fundamentally incorrect. Keyframes set CSS properties, but `img src="Scene1.jpg" alt="Scene1";` is not CSS, not even remotely. — CBroe, Jun 28 '21 at 11:01
Your approach is wrong, check this link http://css3.bradshawenterprises.com/cfimg/ — Pan Vi, Jun 28 '21 at 11:05

John · Answer 1 · 2021-06-28T11:17:17.933

2

Maybe try using background-image

.animation {
        width: 100px;
        height: 100px;
        position: relative;
        background-color: red;
        animation-name: graphic;
        animation-duration: 20s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
    }


@keyframes graphic {
  0%   {background-image: url("https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.all-about-siamese-cats.com%2Fimages%2Ftraditionalseal.jpg&f=1&nofb=1")}
  25%  {background-image: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.petshopsuk.co.uk%2Fimages%2Fcat%2F390%2Fcats.jpg&f=1&nofb=1")}
  50%  {background-image: url("https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.all-about-siamese-cats.com%2Fimages%2Ftraditionalseal.jpg&f=1&nofb=1")}
  75%  {background-image: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.catster.com%2Fwp-content%2Fuploads%2F2015%2F06%2Fcats-love-each-other-imagefile-shutterstock_1446712551.jpg&f=1&nofb=1")}
  100% {background-image: url("https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.all-about-siamese-cats.com%2Fimages%2Ftraditionalseal.jpg&f=1&nofb=1")}
    }

<div class="animation"> </div>

edited Jun 28 '21 at 11:17

answered Jun 28 '21 at 11:11

John

5,132
1
6
17

How would I use this method with images on my computer, and not from urls? – King Jun 28 '21 at 12:22
Just replace the urls in my example with your file path. – John Jun 28 '21 at 12:32
For the file path I tried : `url(././project/scene1.jpg)`, all that is being shown is the red box - is my path wrong? – King Jun 28 '21 at 13:00
@King I do not know your local environment or where your pictures are stored so I am not sure. But maybe take a look here: https://stackoverflow.com/questions/20047364/how-to-give-the-background-image-path-in-css – John Jun 28 '21 at 21:46
I managed to fix it by using urls instead. – King Jun 29 '21 at 08:10

How to animate a transition between 4 images in CSS

1 Answers1