我有这个 CSS:
@-webkit-keyframes sliderFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
@-moz-keyframes sliderFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
@-o-keyframes sliderFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
@keyframes sliderFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#slider {
background-size: cover;
position: fixed;
top: 100px;
bottom: 0px;
height:calc(100%-135px);
width: 100%;
}
#slider img {
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin: 0px;
width: 100%;
height: 100%;
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;
}
#slider img {
-webkit-animation-name: sliderFadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
-moz-animation-name: sliderFadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 8s;
-o-animation-name: sliderFadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 8s;
animation-name: sliderFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
}
#slider img:nth-of-type(1) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
}
#slider img:nth-of-type(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
#slider img:nth-of-type(3) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
#slider img:nth-of-type(4) {
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-delay: 0;
animation-delay: 0;
}
我正在学习CSS Animations,但我没有找到如何设置一张图片的显示时间。
我试图改变动画延迟,但这只会带来麻烦..
你知道怎么做吗?
最好的问候
最佳答案
有几件事需要注意。尽管还有其他方法,但这是我完成它的方法。
对于动画本身:
@keyframes sliderFadeInOut {
0% {
opacity:0;
}
17% {
opacity:1;
}
25% {
opacity:1;
}
92% {
opacity:1;
}
100% {
opacity:0;
}
}
这会导致图像淡入,然后以我们设置的任何 animation-duration
淡出。
将 animation-iteration-count
设置为 1,这样动画就运行一次。
animation-iteration-count: 1;
堆栈中的每个图像都需要定时出现,然后在堆栈中的下一个图像可见时消失。为此,请使用 animation-delay
并为堆栈中的每个图像增加它。
#slider img:nth-child(1) {
animation-delay: 0s;
}
#slider img:nth-child(2) {
animation-delay: 4s;
opacity:0;
}
#slider img:nth-child(3) {
animation-delay: 8s;
opacity:0;
}
#slider img:nth-child(4) {
animation-delay: 12s;
opacity:0;
}
交错的 animation-delay
属性导致堆栈中的第一个图像最初显示。它的动画需要 5 秒并导致图像消失。在 4 秒时,堆栈中的第二张图像开始播放动画,就在第一张图像消失时出现。第三张和第四张图片以此类推。
在上面的代码中,还有一个用于第 2、3 和 4 个图像的初始 opacity
属性。这是最初隐藏它们所必需的。
按照现在的设置,图像将只循环一次。对 animation-delay
和 animation-iteration-count
进行一些小的调整会导致它无限循环。
这是工作 demo .
关于html - CSS动画延迟(img显示时间),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28759738/