Keep Background Image from Resizing During CSS Animation and Remove Flicker
I have a <div> that I am using as a slide show image container. The images that will be displayed in the container are different sizes and applied as background images, rather than <img> elements inside the container so that:
I have background-size:cover and background-clip:content-box and these are correctly keeping the image within the desired area of the container, ensuring that excess is clipped off properly.
The first issue is that during the CSS animation, when one image transitions to another, the new image is resized over the course of that keyframe's timing. What I would like is for the next image to just be transitioned to (at the proper size already), without seeing it resize.
Actually, I'm not even sure why there is a cross-fade visualization in the first place, since I have no instructions to do that (perhaps a built-in -webkit- animation?). I would have thought that you would just see an immediate change from one image to the next. I actually like the cross-fade, but not knowing where it's coming from makes me think it's related to the resizing issue.
The second issue is that during the first iteration (only) of the slide show, there is a flickering of the images and the white background color of the container element is shown briefly. Because this only happens on the first iteration, I thought that perhaps it was an issue with the initial download times for the images and that's why it goes away on subsequent iterations. However, that proved not to be the case when I added some JavaScript to preload the images before the slide show starts and found the same issue. Also, once you run the show, you have the images in your cache and when you refresh the page (which will just get the images from your cache and yes, I am testing this by getting the file from my own test server so they will cache properly) the flicker happens again.
I've seen some posts about eliminating the flicker with various CSS property settings using preserve3d and such, but none of that helped.
I'm using Chrome 62.0.3202.94 desktop on Windows 10.
#outerFrame {
background-color: #22130c;
box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,.2),
inset 0 -2px 1px hsla(0,0%,0%,.4),
0 5px 50px hsla(0,0%,0%,.25),
0 20px 20px -15px hsla(0,0%,0%,.2),
0 30px 20px -15px hsla(0,0%,0%,.15),
0 40px 20px -15px hsla(0,0%,0%,.1);
padding: 1.5em;
overflow: auto;
float: left;
margin: 0 1em 1em 0;
}
#innerFrame {
background-color: #fff5e5;
box-shadow: 0 2px 1px hsla(0,0%,100%,.2),
0 -1px 1px 1px hsla(0,0%,0%,.4),
inset 0 2px 3px 1px hsla(0,0%,0%,.2),
inset 0 4px 3px 1px hsla(0,0%,0%,.2),
inset 0 6px 3px 1px hsla(0,0%,0%,.1);
padding: 1.5em;
}
/* This is the relevant style: */
#innermostFrame {
padding: .75em;
background-color: #fff;
box-shadow: 0 -1px 0 2px hsla(0, 0%, 0%,.03);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size:cover;
background-clip: content-box;
animation: cycle 8s ease-in-out infinite;
width: 30vw;
height:40vh;
min-width: 200px;
max-width: 900px;
}
@keyframes cycle {
0% { background-image: url("https://picsum.photos/200/300/?random"); }
25% { background-image: url("https://picsum.photos/640/480/?random"); }
50% { background-image: url("https://picsum.photos/1900/1200/?random"); }
75% { background-image: url("https://picsum.photos/480/200/?random"); }
100% { background-image: url("https://picsum.photos/600/300/?random"); }
}<div id="outerFrame">
<div id="innerFrame">
<div id="innermostFrame"></div>
</div>
</div>1. Crossfade:
this occurs because the browser tries to animate between keyframes. If we take a look at your @keyframes cycle, we see you make a keyframe every 25%. This means the browser will animate from 0% to 25%. What will it animate? The background that is changed. How will it animate it? Crossfade. Also the background is sized again to cover the div ( the pictures used are of different formats - if you use the same format - this would probably not happen ).
@keyframes cycle {
0% { background-image: url("https://picsum.photos/200/300/?random"); }
25% { background-image: url("https://picsum.photos/640/480/?random"); }
50% { background-image: url("https://picsum.photos/1900/1200/?random"); }
75% { background-image: url("https://picsum.photos/480/200/?random"); }
100% { background-image: url("https://picsum.photos/600/300/?random"); }
}
Solution A ( no crossfade and white background )
You can get rid of the resizing by letting the animation happen almost instantaneous:
0% { background-image: url("https://picsum.photos/200/300/?random"); }
24.99% { background-image: url("https://picsum.photos/200/300/?random"); }
25% { background-image: url("https://picsum.photos/640/480/?random"); }
The background in keyframe 0% is the same at keyframe 24.99% so it does not animate. Then it changes at 25% (this will look like an instant change) See working snippet below:
#outerFrame {
background-color: #22130c;
box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,.2),
inset 0 -2px 1px hsla(0,0%,0%,.4),
0 5px 50px hsla(0,0%,0%,.25),
0 20px 20px -15px hsla(0,0%,0%,.2),
0 30px 20px -15px hsla(0,0%,0%,.15),
0 40px 20px -15px hsla(0,0%,0%,.1);
padding: 1.5em;
overflow: auto;
float: left;
margin: 0 1em 1em 0;
}
#innerFrame {
position: relative;
background-color: #fff5e5;
box-shadow: 0 2px 1px hsla(0,0%,100%,.2),
0 -1px 1px 1px hsla(0,0%,0%,.4),
inset 0 2px 3px 1px hsla(0,0%,0%,.2),
inset 0 4px 3px 1px hsla(0,0%,0%,.2),
inset 0 6px 3px 1px hsla(0,0%,0%,.1);
padding: 1.5em;
}
/* This is the relevant style: */
#innermostFrame{
padding: .75em;
background-color: #fff;
box-shadow: 0 -1px 0 2px hsla(0, 0%, 0%,.03);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size:cover;
background-clip: content-box;
animation: cycle 8s ease-in-out infinite;
width: 30vw;
height:40vh;
min-width: 200px;
max-width: 900px;
}
@keyframes cycle {
0% { background-image: url("https://picsum.photos/200/300/?random"); }
24.99% { background-image: url("https://picsum.photos/200/300/?random"); }
25% { background-image: url("https://picsum.photos/640/480/?random"); }
49.99% { background-image: url("https://picsum.photos/640/480/?random"); }
50% { background-image: url("https://picsum.photos/1900/1200/?random"); }
74.99% { background-image: url("https://picsum.photos/1900/1200/?random"); }
75% { background-image: url("https://picsum.photos/480/200/?random"); }
99.99% { background-image: url("https://picsum.photos/480/200/?random"); }
100% { background-image: url("https://picsum.photos/200/300/?random"); }
}<div id="outerFrame">
<div id="innerFrame">
<div id="innermostFrame"></div>
</div>
</div>