多个图像之间的淡入淡出CSS

我试图在3张图像之间使用css进行交叉淡入淡出。多个图像之间的淡入淡出CSS

我是@keyframes的新手，所以即时通讯有麻烦让它工作。

下面，是HTML和CSS代码片段：

的index.html：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Test</title> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 

    <body> 
     <div id="cf"> 
      <img class="bottom" src="assets/1.png" /> 
      <img class="top" src="assets/2.png" /> 
       <img class="bottom" src="assets/3.png"> 
     </div> 
    </body> 
</html>

的style.css：

#cf { 
    position: relative; 
    height: auto; 
    width: auto; 
    margin: 0 auto; 
} 

#cf img { 
    position: absolute; 
    left: 0; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 

#cf img { 
    animation-name: cf3FadeInOut; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
    animation-duration: 6s; 
    animation-direction: alternate; 
} 

#cf img:nth-of-type(1) { 
    animation-delay: 4s; 
} 

#cf img:nth-of-type(2) { 
    animation-delay: 2s; 
} 

#cf img:nth-of-type(3) { 
    animation-delay: 0; 
} 

@keyframes cf3FadeInOut { 
    0% { 
     opacity: 1; 
    } 
    17% { 
     opacity: 1; 
    } 
    25% { 
     opacity: 0; 
    } 
    92% { 
     opacity: 0; 
    } 
    100% { 
     opacity: 1; 
    } 
}

眼下，动画怪怪的，从闪烁一个图像到另一个，随机动画时间。

来源

2017-04-05 GreetingsFriend

您接近正确的解决方案。一旦达到100％，animation-direction: alternate;会导致动画“倒退”。随着你的关键帧定义的奇数倍，这导致不均匀的转变：

keyframe  0% 17% 25% 92% 100% 92% 25% 17% 0% 17% ... infinite 
state   :1 1 0 0  1  0 0 1 1 1 
time in state : 17%  62% 0%  62%   34% 
transition time:  8%  8%  8%  8%

简化关键帧，甚至时间和你应该罚款。有了均匀的时间分配，你根本不需要animation-direction。您可以通过更改关键帧的animation-duration和animation-delay来轻松调整图像的时间。

#cf img { 
 
    animation-name: cf3FadeInOut; 
 
    animation-timing-function: ease-in-out; 
 
/* if you only want to cycle a finite amount of times, 
 
    simply change 'infinite' with # of iterations you need */ 
 
    animation-iteration-count: infinite; 
 
    animation-duration: 6s; 
 
    animation-direction: alternate; /* not strictly necessary */ 
 
    position:absolute; 
 
} 
 

 
#cf img:nth-of-type(1) { 
 
    animation-delay: 5s; 
 
} 
 

 
#cf img:nth-of-type(2) { 
 
    animation-delay: 3s; 
 
} 
 

 
#cf img:nth-of-type(3) { 
 
    /* add some delay for the first picture as well */ 
 
    animation-delay: 1s; 
 
} 
 

 
@keyframes cf3FadeInOut { 
 
    /* distributing times evenly */ 
 
    0% { 
 
     opacity: 1; 
 
    } 
 
    25% { 
 
     opacity: 0; 
 
    } 
 
    75% { 
 
     opacity: 0; 
 
    } 
 
    100% { 
 
     opacity: 1; 
 
    } 
 
}

<div id="cf"> 
 
    <img class="bottom" src="http://lorempixel.com/200/100/sports/1" /> 
 
    <img class="top" src="http://lorempixel.com/200/100/sports/2" /> 
 
    <img class="bottom" src="http://lorempixel.com/200/100/sports/3"> 
 
</div>

严格来说，因为他们过渡到opacity:1，而不是衰落图片的图片，并有稍微不同的时间前两个转变是略有不同，但不同的是几乎不可见和国际海事组织与代码中所产生的复杂性相比，不值得付出努力。

来源

2017-04-05 19:06:05 Christoph

工作正常！如何增加img转换之间的时间？他们转得很快。 – GreetingsFriend

只需更改时间 - 我将其添加到相应的答案中。 – Christoph

有时会显示背景低音图像。我可以让它停止吗？ – GreetingsFriend

多个图像之间的淡入淡出CSS

回答

相关问题