CSS CSS中的多个图像交叉淡入淡出 - 没有（java）脚本

Multiple image cross fading in CSS - without (java) script

提问by user632942

Is it possible to cross fade 5 images in CSS, without using java script? I have found a similar question: css3 image crossfade (no javascript), however, it has only the CSS code snippet; which I tried, but could not get it working. I'm new to CSS, so could not link the CSS mentioned in the above page to my following HTML:

是否可以在不使用 java 脚本的情况下在 CSS 中交叉淡入淡出 5 个图像？我发现了一个类似的问题： css3 image crossfade (no javascript)，但是，它只有 CSS 代码片段；我试过，但无法让它工作。我是 CSS 新手，因此无法将上述页面中提到的 CSS 链接到我的以下 HTML：

  <div id= "crossfade">
     <img class = "cone" src = "1.png" alt = "png">
     <img class = "ctwo" src = "2.png" alt = "png">
     <img class = "cthree" src = "3.png" alt = "png">
     <img class = "cfour" src = "4.png" alt = "png">
     <img class = "cfive" src = "5.png" alt = "png">
  </div>

回答by

This can easily be done with CSS3 if you know how many images you have.

如果你知道你有多少张图片，这可以很容易地用 CSS3 完成。

jsFiddle: http://jsfiddle.net/hajmd/

jsFiddle：http: //jsfiddle.net/hajmd/

#crossfade > img { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 30s linear infinite 0s;
    -moz-animation: imageAnimation 30s linear infinite 0s;
    -o-animation: imageAnimation 30s linear infinite 0s;
    -ms-animation: imageAnimation 30s linear infinite 0s;
    animation: imageAnimation 30s linear infinite 0s; 
}

The "30s" at "-webkit-animation: imageAnimation 30slinear infinite0s;" tells that the animation for each image will last 30 seconds in infinete number of times.

“ -webkit-animation: imageAnimation 30slinear infinite0s;”中的“ 30s”表示每个图像的动画将持续 30 秒的无限次数。

#crossfade > img:nth-child(2)  { 
    background-image: url(../images/2.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
#crossfade > img:nth-child(3) { 
    background-image: url(../images/3.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
#crossfade > img:nth-child(4) { 
    background-image: url(../images/4.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
#crossfade > img:nth-child(5) { 
    background-image: url(../images/5.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}

@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

回答by RyanFishman

The example you referenced should work for you for the example you referenced. However please note that CSS3 is not supported on all browsers (Such as IE8 and IE7) and therefore will not work in those browsers.

您引用的示例应该适用于您引用的示例。但是请注意，并非所有浏览器（例如 IE8 和 IE7）都支持 CSS3，因此无法在这些浏览器中使用。