css3 image crossfade (no javascript)

问题

I'm pretty sure it's possible to do a css only image crossfade using the new css animation features. My requirements are that it should work for arbitrary number of images without javascript.

Does anyone know how it's done?

How I'm starting off:

img(src='img1.png')
img(src='img2.png')
img(src='img3.png')
img(src='img4.png')

Next all the images are set to stack on top of each other with the first one showing:

img
  opacity 0
  transition 1s
  position absolute

  &:first-child
    opacity 100

Now how do I go through each image?

Edit: Seems impossible. Requires javascript.

回答1:

This article is the best I've seen for doing an effect like this.

http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/

They use spans, animation and the :nth-child property to achieve a crossfade between the background images. Pretty awesome.

.cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 36s linear infinite 0s;
}


    .cb-slideshow li:nth-child(1) span {
    background-image: url(../images/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
    background-image: url(../images/2.jpg);
    animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
    background-image: url(../images/3.jpg);
    animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
    background-image: url(../images/4.jpg);
    animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
    background-image: url(../images/5.jpg);
    animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
    background-image: url(../images/6.jpg);
    animation-delay: 30s;
}

.cb-slideshow li:nth-child(2) div {
    animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
    animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
    animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
    animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
    animation-delay: 30s;
}

回答2:

Use keyframes, outlined in this article: http://css3.bradshawenterprises.com/cfimg/#cfimg3

来源：https://stackoverflow.com/questions/8540906/css3-image-crossfade-no-javascript

标签

css

css3

css-animations