css3 image crossfade (no javascript)

Question

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.

Quick demo: crossfade on hover jsfiddle.net/e1z034uy

Pepijn Olivier
– Pepijn Olivier

2015-02-19 14:43:18 +00:00
Commented Feb 19, 2015 at 14:43 — Pepijn Olivier
– Pepijn Olivier, Commented Feb 19, 2015 at 14:43

arnonate · Accepted Answer · 2012-01-17 16:29:53Z

8

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;
}

answered Jan 17, 2012 at 16:29

arnonate

4954 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Harry Over a year ago

This is the same thing as Michael Robinson's answer.

cfx Over a year ago

The problem with that tutorial is that it's not a true dissolve. If your background color is not white or if your text and background colors are the same then there are some visual shortcomings.

Michael Robinson · Accepted Answer · 2011-12-16 22:33:43Z

6

+50

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

answered Dec 16, 2011 at 22:33

Michael Robinson

29.6k12 gold badges109 silver badges131 bronze badges

5 Comments

Harry Over a year ago

is arbitrary number of images impossible? It seems as if you need to set the number. Also the example doesn't loop around to the first after the animation is complete.

Michael Robinson Over a year ago

@Harry: It loops for me - I guess because of animation-iteration-count: infinite;

Michael Robinson Over a year ago

@MichaelRobinson: Sorry but I can't see where the total images has been set in that example.

Harry Over a year ago

Hi, I'm looking at the second half of demo 3. The first half uses only 2 images, it seems like only 2 images could work. The second half uses 4 images but they explicitly define 4 in the css.

Harry Over a year ago

I've decided that this is still probably the best answer. I can use javascript to set the number of files since pure css seems impossible. Thanks.

Collectives™ on Stack Overflow

css3 image crossfade (no javascript)

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related