Create a Loop Using SCSS to Change Background Images with CSS3 Animate

Create a loop using SCSS to change background images with CSS3 animate?

Sass can only increment (or decrement) @for loops by 1. If you want a different interval, you need to use math to get there:

@-webkit-keyframes perimeter {
  @for $i from 0 through 39 {
    #{$i * 2.564102564102564%} {
      background-image: url('../img/perimeters/PerimeterFountains#{$i}.png');
    }
  }
}

Related: Rounding numbers in Sass and adjusting the amount of decimals

Background image CSS3 infinite loop animation

Fixed by using the exact height of the image:

@-webkit-keyframes slide {
    from { background-position: left 0; }
    to { background-position: left -1790px; }
}

How can I loop the background into different images?

You can transition through background images using <img> and CSS opacity.

While it is not yet part of the specification to animate fading background-image, we can—however—animate opacity on <img>. We can also download all of the images in parallel using loading="eager", meanwhile CSS only downloads images when it is visible on screen.

let curImg = 1;
let bgImgs = document.querySelectorAll(".bg-imgs img");
    setInterval(() => {
        /* if first image (curImg = 0), then unload last image */
        let prevImg = curImg? curImg-1: bgImgs.length-1;

        bgImgs[prevImg].style.opacity = 0;
        bgImgs[curImg].style.opacity = 100;
        curImg++;

        /* if last image, go back to first image */
        if (curImg >= bgImgs.length) {
            curImg = 0;
        }
    / *every 10 seconds */
}, 10000);

.bg-imgs img {
    position: absolute;
    z-index: -1;
    height: 100%;
    opacity: 0%;
    transition-delay: 5s;
    transition: opacity 5s;
}

<div class="bg-imgs" aria-hidden="true">
    <!--first img to be visible-->
    <img src="http://lorempixel.com/1024/1024/animals/1/" loading="eager" style="opacity:100%">

    <img src="http://lorempixel.com/1024/1024/animals/2/" loading="eager">
    <img src="http://lorempixel.com/1024/1024/animals/3/" loading="eager">
    <img src="http://lorempixel.com/1024/1024/animals/4/" loading="eager">
</div>

Css - animating background image - zoom effect with loop

Start the image background-size as greater than 100% and then use a keyframe animation it 'scale' it down to 100% as the end value.

For a loop, use animation-direction: alternate;

body {  height: 100vh;  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3999/Tilt-Shift_-_Cityscene.jpg);  background-size: 110% 110%;  background-position: center center;  animation: shrink 5s infinite alternate;}@keyframes shrink {  0% {    background-size: 110% 110%;  }  100% {    background-size: 100% 100%;  }}

Looping background images flash between image on first run

Of course! Because the images were taking a little time to load.

I added a hidden div in front of my main one that had each of the images set as a background as well.

<div id="dummy" hidden></div>
<style>
#dummy {
    display: none; 
    background-image: url("1.jpg";), url("2.jpg";), url("3.jpg";), url("4.jpg";), url("5.jpg";), url("6.jpg";);">
}
</style>

Responsive Background Image (animated fade loop) that will span full height of page content?

ITERATION 2 :

I couldn't make any of the methods found on SO to force an absolute div to take on the height of its parent (when that element's height is auto) work.

So, turning to putting the images as backgrounds on the the body itself, using a pseudo before element for images fading in and after for fading out it works. Body height is set to auto, but with min-height: 100vh.

BUT, it takes a lot of GPU, even more than (current at time of writing this) https://www.vortex42studios.com, so let's hope someone can come up with something better. Otherwise we are in danger of draining the user's mobile battery or their laptop scorching their knees.

* {
  margin: 0;
  padding: 0;
}
    body {
      height: auto;
      min-height: 100vh;
      width: auto;
      overflow: visible;
      position: relative;
    }
    body::before, body::after {
        display: inline-block;
        top: 0;
        left: 0;
        position: relative;
        position: absolute;
        content: '';
        animation: none 25s infinite ease;
        animation-fill-mode: forwards;
        width: 100%;
        height: 100%;
        min-height: 100vh;
        z-index: -1;
        overflow: visible;
        background-size: cover;
        background-position: center center;
    }
    body::before {
      animation-name: fadein;
    }
    body::after {
        animation-name: fadeout;
    }
    @keyframes fadein {
      0% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG01_1080P.JPG);
      }
      20% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG01_1080P.JPG);
        }
      20.001% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG02_1080P.JPG);
        }
      40% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG02_1080P.JPG);
        }
      40.001% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG03_1080P.JPG);
        }
      60% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG03_1080P.JPG);
        }
      60.001% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG04_1080P.JPG);
        }
      80% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG04_1080P.JPG);
      }
      80.001% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG05_1080P.JPG);
        }  
      100% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG05_1080P.JPG);
        }
    }
    @keyframes fadeout {
      0% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG05_1080P.JPG);
      }
      20% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG05_1080P.JPG);
        }
      20.001% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG01_1080P.JPG);
        }
      40% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG01_1080P.JPG);
        }
      40.001% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG02_1080P.JPG);
        }
      60% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG02_1080P.JPG);
        }
      60.001% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG03_1080P.JPG);
        }
      80% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG03_1080P.JPG);
      }
      80.001% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG04_1080P.JPG);
        }  
      100% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG04_1080P.JPG);
        }
    }
    .wrap {
      height: auto;
      width: 100%;;
    }

<div class="wrap">some stuff<br>some stuff<br>some stuff<br>some stuff<br>some stuff<br>some stuff<br>some stuff<br>some stuff<br></div>  

CSS way of looping a background image with cover or contain sizing

The problem is that, to make it responsive, you need to set the animated background-position using percentages.

But, when you set background-size as cover or contain, in some cases the width is adjusted to 100%. In this case, background-position using percentages is useless (won't move it).

The only way that I have found to manage this is moving the image to a pseudo element, and moving it. To keep the continuity, though, we will need two pseudo elements.

But that won't work on a textarea.

You didn't said anything about textarea being a requirement, so I am posting this. To show that it works on resize, hover it.

.container {  width: 160px;  height: 100px;  position: relative;  border: solid 1px black;  display: inline-block;}.container:nth-child(2) {   width: 220px;  }.bg {    position: absolute;    width: 100%;    height: 100%;    overflow: hidden;}
.bg:before, .bg:after {    content: "";    position: absolute;    width: 100%;    height: 100%;    background-image: url(http://i.stack.imgur.com/wBHey.png);    background-size: 100%;    animation: move 2s infinite linear;}
.bg:before {    right: 100%;}
@keyframes move {    from {transform: translateX(  0%);}      to {transform: translateX(100%);}}

<div class="container">  <div class="bg"></div></div><div class="container">  <div class="bg"></div></div>

background image loop transition CSS3

check this out :

@-webkit-keyframes test{
0% {
    background-image: url('http://www.polydevs.com/mystery/img/15.jpg');
}
33% {
    background-image: url('http://www.polydevs.com/mystery/img/151.jpg');
}
100% {              //Complete the loop.
    background-image: url('http://www.polydevs.com/mystery/img/152.jpg');
    }
}

.featured { 
/*background-image: url('../img/15.jpg');*/
width: 100%;
height: 470px;
margin: auto 0px;
/*margin-top: -446px;*/
-webkit-transition: margin-top 1s;
transition-delay: margin-top 0.2s;

-webkit-animation-name: test;
-webkit-animation-duration: 5s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite; --> add this line. 
}

Fiddle

---

Related Topics