Fade In Opacity for Initial State of Keyframes Animation

[kt]

I’m using the below Keyframes animation to fade images in and out. It works well, but I have a problem. The dimensions and aspect ratios for each image may be different and are not predictable. This is on purpose. Therefore, images 2, 3, and 4 may be larger than image 1. Images 3 and 4 may be larger than image 2, etc.

On initial load if image 2 is larger than image 1, I need image 2 to be invisible so it does not show around the edges of image 1. This is why I have opacity set to 0 on images 2, 3, and 4. Once each of these images begins the animation, the animation changes the opacity values.

The problem is that on the first iteration only of the animation for images 2, 3, and 4, the opacity comes in abruptly. The previous image fades out but the next image doesn’t fade in, it abruptly appears after the 2 second transition is over. This is only the case on the first iteration of the animation – after this the animation cycles perfectly with all transitions fading in and out aesthetically. I’ve tried using transitions, but it has no effect as I applied it.

Any ideas on how I can have images 2, 3, and 4 invisible initially but then fade in smoothly on that initial run of the animation?

Thanks for your help!

@keyframes imageSwap {
0% {
opacity:1;
}
19% {
opacity:1;
}
25% {
opacity:0;
}
94% {
opacity:0;
}
100% {
opacity:1;
}
}
#image1 {
animation-name: imageSwap;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 32s;
animation-delay: 0;
}
#image2 {
opacity: 0;
animation-name: imageSwap;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 32s;
animation-delay: 8s;
}
#image3 {
opacity: 0;
animation-name: imageSwap;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 32s;
animation-delay: 16s;
}
#image4 {
opacity: 0;
animation-name: imageSwap;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 32s;
animation-delay: 24s;
}

[Beverleyh]

What’s it doing? Cross-fading images? Fading-to-black between images? A working demo in CodePen would make it easier for us to visualise, and to make live edits to, although I have to say, why try to do this solely with CSS? Why not use JavaScript for timings and CSS for fade effects? If you want to explore that combo, some examples can be found here http://fofwebdesign.co.uk/template/_testing/cross-fade-slideshow-img-js.htm

Good luck

[kt]

It is cross-fading. When CSS has a solution, I tend to favor it over Javascript. Also, I don’t think I’ve ever seen a cross-fade of differently dimension-ed objects. Normally they are sized to fit the same dimension. In this respect, my example is unusual.

Here is a CodePen: http://codepen.io/kt1/pen/VpbRdx

I used colored block instead of images, but this shows what I’m describing. If you comment out the opacity on image id’s 2, 3 and 4 you’ll see the larger images showing behind the smaller images, which is to be avoided.

With the opacity set to 0 for id’s 2, 3, and 4 – watch closely and on the very first round of the animations, image 1 will fade out and image 2 will pop in instead of fading in – likewise for images 3 and 4. However, after this first iteration of the animation, if you leave it running you will see all transitions smoothly fading in and out. It is only that images 2, 3, and 4 cannot fade in on the very first iteration of the animation. This is what I’m trying to solve.

Thanks again.

[Beverleyh]

> When CSS has a solution, I tend to favor it over Javascript.

Me too. But sometimes, after exploring various avenues and hitting numerous stumbling blocks (as it seems you are doing here too) I’ve come to accept that a gentle sprinkle of JavaScript isn’t so scary and can actually be a desirable addition.

> I don’t think I’ve ever seen a cross-fade of differently dimension-ed objects. Normally they are sized to fit the same dimension. In this respect, my example is unusual.

It is, and you’ll hopefully be pleased to learn that the demo I linked above can accommodate differently sized images too – just take out the CSS line for the # slideshow container, and voila :)

Anyway, if you don’t find a CSS-only solution, I hope you keep it in mind.

[kt]

I figured it out. I just needed to start the animation at opacity zero instead of opacity 1 and then change the percentage timings to match. It works perfectly. But thanks for taking the time to try to help me Beverleyh!

[Author]

Posts