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

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>
csscss-animations


Solution 1:[1]

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>

Solution 2:[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Alexander Nied
Solution 2

Related Questions