CSS animations default to slow fade in-out, is there a way to change that?

Question

New to using CSS animations. Created an animation with 8 pictures for a total animation-duration 100sec. Using keyframes percentages I have the first 6 frames 10sec, 7th frame 30sec, last frame 10sec specifying the pictures using a background-image url. When implemented the pictures fade-in and fade-out very slowly barely accomplishing that in the 10sec time of the frame. The W3schools website I'm learning this from doesn't give any option to speed the fades up or specify a different type of slide transition. I'm not finding answers to this anywhere else on the web. Am I missing something? See code below:

.homeslider {
  width: 950px;
  height: 400px;
  padding-left: 25px;
  animation-name: homepics;
  animation-duration: 100s;
}

@keyframes homepics {
  0% { background-image: url('images/pic1.png'); }
  10% { background-image: url('images/pic2.png'); }
  20% { background-image: url('images/pic3.png'); }
  30% { background-image: url('images/pic4.png'); }
  40% { background-image: url('images/pic5.png'); }
  50% { background-image: url('images/pic6.png'); }
  80% { background-image: url('images/pic7.png'); }
  90% { background-image: url('images/pic8.png'); }
}

<div class="homeslider"></div>

Could you clarify exactly what you want to happen? It sounds as though you want an image to fade in for a second or two, then be fully viewable for a second or two and then fade out - and as it is fading out the next one starts fading in. Is that right? — A Haworth, May 12 '22 at 17:28
You are close. Feasibly I'd like no transition, but a small smooth one would work, too. Alexander gave me the latter below, but the transition is not smooth. Was trying to do this without downloading someone else's JQuery slider code. If that is the only solution, I guess I'll head down that path. Still hoping there is a CSS inherent way to do this. — Alan - Seattle, May 12 '22 at 18:47

A Haworth · Answer 1 · 2022-05-13T05:42:11.213

background-image is an animatable property so you are getting fading in and out of the images throughout the sequence - at no point does an image 'stay still' with full opacity.

This snippet takes a rather simplistic approach to minimising the transition time between background images - showing an image for nearly 10% in the case of the first few, then transitioning to the next image very quickly.

There are drawbacks to this method - the system doesn't look forward to bring in background images until they are needed, so the first time through there can be quite a flashy gap as it loads the next image. [A 'fix' of running the animation once, potentially out of sight, very quicly to get images loaded in advance has been removed as it didn't seem to be what was wanted].

.homeslider {
  width: 950px;
  height: 400px;
  padding-left: 25px;
  animation-name: homepics;
  animation-duration: 100s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

@keyframes homepics {
  0%,
  9.9999% {
    background-image: url(https://picsum.photos/id/1015/200/300);
  }
  10%,
  19.9999% {
    background-image: url(https://picsum.photos/id/1016/200/300);
  }
  20%,
  29.9999% {
    background-image: url(https://picsum.photos/id/1018/200/300);
  }
  30%,
  39.9999% {
    background-image: url(https://picsum.photos/id/1019/200/300);
  }
  40%,
  49.9999% {
    background-image: url(https://picsum.photos/id/1020/200/300);
  }
  50%,
  79.999% {
    background-image: url(https://picsum.photos/id/1021/200/300);
  }
  80%,
  89.999% {
    background-image: url(https://picsum.photos/id/1022/200/300);
  }
  90%,
  100% {
    background-image: url(https://picsum.photos/id/1023/200/300);
  }
}

<div class="homeslider"></div>

There are many other ways of simulating an image slider using pure HTML/CSS - for example having all the images stacked on top of each other and 'moving them' with z-index, or playing with opacities.

The 0.5 duration was really weird and not needed. Didn't realize the percentage could be so finely specified, that fixed the flash. The background specification had nothing to do with my post and wiped out my opaque background effect on the captions. Not sure what that was for. The animation-fill-mode: forwards still doesn't work and the infinite specification made everything repeat, the opposite of having the last slide remain. — Alan - Seattle, May 13 '22 at 04:26
Thanks for the clarifications. I hadn't realised this wasn't for infinite scrolling, the background was there just for the test and obviously can be removed, the 'advanced loading' can of course just be removed if you are not finding difficulty with the time the images are loading. So I've done the relevant edits. — A Haworth, May 13 '22 at 05:39

score 0 · Accepted Answer · answered May 12 '22 at 16:25

0

In order to illustrate your issue on the site, I created a snippet using background colors instead of images:

.homeslider {
  width: 950px;
  height: 400px;
  padding-left: 25px;
  animation-name: homepics;
  animation-duration: 100s;
}

@keyframes homepics {
  0% { background-color: red; }
  10% { background-color: orange; }
  20% { background-color: yellow; }
  30% { background-color: green; }
  40% { background-color: blue; }
  50% { background-color: indigo; }
  80% { background-color: violet; }
  90% { background-color: purple; }
}

<div class="homeslider"></div>

In the below example, I think I resolved your issue by adding additional keyframes right before the threshold of the next change, so that the transition doesn't occur until the last possible moment:

.homeslider {
  width: 950px;
  height: 400px;
  padding-left: 25px;
  animation-name: homepics;
  animation-duration: 100s;
}

@keyframes homepics {
  0% { background-color: red; }
  9% { background-color: red; }
  10% { background-color: orange; }
  19% { background-color: orange; }
  20% { background-color: yellow; }
  29% { background-color: yellow; }
  30% { background-color: green; }
  39% { background-color: green; }
  40% { background-color: blue; }
  49% { background-color: blue; }
  50% { background-color: indigo; }
  79% { background-color: indigo; }
  80% { background-color: violet; }
  89% { background-color: violet; }
  90% { background-color: purple; }
  99% { background-color: purple; }
}

<div class="homeslider"></div>

answered May 12 '22 at 16:25

Alexander Nied

12,804
4
25
45

Thank you, Alexander. Applying that to my images, that indeed does speed up the fade transition. There is a quick flash before the transition begins which is undesirable. No doubt the result of compromising the slow fade. So there really is no CSS property to animation that allows the slow fade properly? One last question, too. The last frame I'd like to remain indefinitely. I don't see an option for that either outside of raising the duration to a huge number and making the percentages of the keyframes infinitesimal. Any advice to impart there? I really appreciate your help! – Alan - Seattle May 12 '22 at 17:20
Investigate animation-fill-mode. – A Haworth May 12 '22 at 17:26
Fascinating on the transition flash-- unfortunately without a [mcve] it is going to be hard for me to recreate it. Have you verified if it happens across all browsers? Might be worth opening a separate question (or searching to see if someone has already solved that issue). Regarding preventing looping, @AHaworth is correct-- [`animation-fill-mode`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode) is probably where your solution will lie; specifically, `animation-fill-mode: forwards;`. Good luck, and happy coding! – Alexander Nied May 12 '22 at 17:34
(Also, please remember to select the answer that best solved your issue with the checkmark on the screen. You can do that now, or wait to see if anybody else comes along and provides an solution that better works for your issue.) – Alexander Nied May 12 '22 at 17:36
The animation-fill-mode: forwards is not doing what it advertises. The last frame still disappears after the animation completes. The animation transition flash and fill mode not working may both may be due to my downloading animation.css from the web and using it to slide elements onto the website home page from the right. I'll research that, but I thank you both for your assistance. I'll wait a bit more to see if someone has a different solution without the flash, if not I'll give you credit here. Thanks again. – Alan - Seattle May 12 '22 at 19:02
I've uploaded the website page in question. It's a website I'm developing for my HS 50th reunion :) Check out alterclassof75.org/index2.html. The initial index.html Home page uses an animation I created with Photoshop, but when it was converted to a animated .GIF all the opaque backgrounds were converted to white, so I thought I'd give CSS animations a shot. – Alan - Seattle May 12 '22 at 19:06
@Alan-Seattle - Congratulations on your upcoming 50th reunion! It appears that [you are not the first person to have encountered a flicker issue when animating `background-image` with CSS](https://stackoverflow.com/q/41730353/6831341). The prevailing theory in that post is that the flicker is from time downloading the image over the network (or perhaps retrieving it from cache); some remedies are provided that you might try. As for the `animation-fill-mode` issue, check the previous link to MDN-- it works there, maybe see how your code differs to debug. Good luck, and happy coding! – Alexander Nied May 13 '22 at 05:00

CSS animations default to slow fade in-out, is there a way to change that?

2 Answers2