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

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 ></div>

CodePudding user response：

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 ></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 ></div>

CodePudding user response：

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. To attempt to mitigate this this snippet runs the animation once quickly. You'll want to decide how best to do this, or not. Including having it done out of sight.

.homeslider {
  width: 950px;
  height: 400px;
  padding-left: 25px;
  animation-name: homepics, homepics;
  animation-duration: 0.5s, 100s;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forward;
  animation-delay: 0s, 0.5s;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: black;
}

@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 ></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.