CSS动画计时问题

Question

My entire code looks like this:

.inner .css-img {
  max-width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  -webkit-animation: css-carousel-fade 10s linear infinite;
  -moz-animation: css-carousel-fade 10s linear infinite;
  -ms-animation: css-carousel-fade 10s linear infinite;
  animation: css-carousel-fade 10s linear infinite;
}

.inner .css-img:nth-child(2) {
  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
  -ms-animation-delay: 5s;
  animation-delay: 5s;
}

@keyframes css-carousel-fade {
  0%, 50%, 100% { opacity: 0; }
  10%, 50% { opacity: 1;}
}

What is happening now is that the transition between image one and two is working create, except it takes too long so show the first image and it takes too long to go from the second image back to the first.

Answer 1

The opacity is what's being animated. The % tells you what portion of the overall animation handles that part. So, from 0-45, you have an opacity of 1, then it fades from 45-90, and then it stays faded out from 90-100 and then snaps back to 1 again when the animation starts over.