CSS Keyframe Animations

Question

I have a really basic bit of HTML & CSS and trying to achieve a keyframes animation that's an automatic slideshow. I copied a tutorial that worked absolutely fine but struggling to configure it myself.

The html & CSS is :

#SLIDE_BG {
  width: 100%;
  height: 100vh;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  animation: slideBg 8s linear infinite 0s;
  animation-timing-function: ease-in-out;
  background-image: url('/assets/images/jack-test/beatles-one.jpg');
}

@keyframes slideBg {
  0% {
    background-image: url('/assets/images/jack-test/beatles-oone.jpeg');
  }
  25% {
    background-image: url('/assets/images/jack-test/beatles-two.jpeg');
  }
  50% {
    background-image: url('/assets/images/jack-test/jimi-hendix.jpeg');
  }
  75% {
    background-image: url('/assets/images/jack-test/led-zeppelin.jpeg');
  }
  100% {
    background-image: url('/assets/images/jack-test/rock-band.jpeg');
  }
}

<div id="SLIDE_BG"></div>

@Rana I corrected that after unfortunately and still don't work — jccoder
– jccoder, Commented Oct 4, 2021 at 13:32

Yupma · Accepted Answer · 2021-10-06 19:16:16Z

You have to use url (hosted online) for using background-image . If you are using local pc than you can't use it , you have images to be hosted online or in same folder.

#SLIDE_BG {
  width: 100%;
  height: 100vh;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  animation: slideBg 8s linear infinite 0s;
  animation-timing-function: ease-in-out;
  background-image: url('https://jooinn.com/images/dramatic-landscape-7.jpg');
}

@keyframes slideBg {
  0% {
    background-image: url('https://jooinn.com/images/dramatic-landscape-7.jpg');
  }
  25% {
    background-image: url('http://www.thewowstyle.com/wp-content/uploads/2015/01/nature-image.jpg');
  }
  50% {
    background-image: url('https://images.designtrends.com/wp-content/uploads/2016/01/04085621/A-Cold-Sunset-Background.jpg');
  }
  75% {
    background-image: url('https://jooinn.com/images/hdr-landscape-1.jpg');
  }
  100% {
    background-image: url('https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2016/03/fall-trees-road-1.jpg');
  }
}

<div id="SLIDE_BG"></div>

Update :

You can also use local path of images in PC with some point to remember:

If it is saved in same drive (C: D: .....) where your HTML file is saved , then use complete path in the background-image: url('') starting with drive name , i.e , C:/folder1/..../image.png .
If image is saved in the same folder where HTML file is saved , than use of direct name is possible , i.e , background-image: url('imageName.png') will work out
If image is saved in the subfolder's where HTML file is saved , than short path can be used , i.e , htmlFileFolder(containing html file) > folder1 > folder2 > image.png then url will be like this folder1/folder2/image.png not /folder1/folder2/image.png
If image is saved in the folder other than where HTML file or HTML file subfolders than , complete path have to be used

Ajay Chauhan · Accepted Answer · 2021-10-04 13:36:10Z

You need to give image path properly check below

#SLIDE_BG {
  width: 100%;
  height: 100vh;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  animation: slideBg 8s linear infinite 0s;
  animation-timing-function: ease-in-out;
  background-image: url('https://dummyimage.com/800x300');         
}

@keyframes slideBg {
  0% {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/29/Dscn7471_sunset-sundog_crop_800x300.jpg');
  }
  25% {
    background-image: url('https://www.thegrandsiba.com/wp-content/uploads/2017/06/MG_28423-800x300.jpg');
  }
  50% {
    background-image: url('https://dummyimage.com/800x300');
  }
  75% {
    background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5e2a19d4-f261-4548-b4a7-1e2f5ad139af/d99najf-e9049704-bfc4-4836-952d-9315403bd60f.gif');
  }
  100% {
    background-image: url('https://www.businessclass.co.uk/wp-content/uploads/sites/11/2016/04/Toronto-800x300-800x300.jpg');
  }
}

Collectives™ on Stack Overflow

CSS Keyframe Animations

2 Answers 2

Update :

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update :

Comments

Comments

Related