Animation delay property to change content at fixed intervals

Question

I am trying to animate two pictures so that they change at fixed intervals but the problem is that the second image appears quickly and fades I need a way to make the delay property to repeat i have refereed this but that doesn't seem to work CSS animation delay in repeating
http://jsfiddle.net/fc3nb5rL/2/

I think my problem is somewhere here

@-webkit-keyframes anim {
from {
    z-index:1;
}
to {
    z-index:-2;
}
}
.back {
-webkit-animation:anim 5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function: ease-in-out;
}

@-webkit-keyframes anim2 {
from {
    z-index:1;
}
to {
    z-index:-2;
}
}

score 1 · Accepted Answer · answered Sep 25 '14 at 12:55

1

First fix your HTML(markup), then you can animate the opacity and not the z-index

.container {
    position:relative;
    height:500px;
    width:500px;
    margin:0 auto;
}
.container img {
    position:absolute;
    width:100%;
}

@-webkit-keyframes anim1 {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}


@-webkit-keyframes anim2 {
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}

[href=first] img {
     opacity:0;
     /*animation----:----name--duration--delay--timing function---direction----iteration count*/
     -webkit-animation: anim1 2s 0s linear alternate infinite;
}
[href=second] img {
     opacity:1;
    -webkit-animation: anim2 2s 0s linear alternate infinite;
}

<div class="container">
    <a href="second">
        <img src="http://placekitten.com/300/300" />
    </a>
    <a href="first"> 
        <img class="front" src="http://placekitten.com/300/301" />
    </a>
</div>

answered Sep 25 '14 at 12:55

Gildas.Tambo

22,173
7
50
78

it's great but in my code the pictures have different links but here there is only one – Akshay Sep 25 '14 at 12:56
What is a link to you ? you mean a source `src` ? – Gildas.Tambo Sep 25 '14 at 12:59
the images are links to specific pages and each image has it's own link but here if you use opacity there will be only one link(for the image placed on top) the other will have the same link – Akshay Sep 25 '14 at 13:02
you mean anchors ``? in your example you have `first` and `second` same in my demo just that the markup is fixed. – Gildas.Tambo Sep 25 '14 at 13:05
When z-index is used the first image will take you to 'first' and the second image will take you to 'second' (you can see the change in link if you hover over the images in my demo) – Akshay Sep 25 '14 at 13:14
What is the difference between `anim` and `anim2` in your code? for me it is the same just different names – Gildas.Tambo Sep 25 '14 at 13:24
sorry my bad it was one of my failed attempts :) – Akshay Sep 25 '14 at 13:25
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/61907/discussion-between-tambo-and-akshay). – Gildas.Tambo Sep 25 '14 at 13:27

score 1 · Answer 2 · answered Sep 25 '14 at 13:38

1

Give this a shot. I have also set it up to be cross-browser compatible. http://jsfiddle.net/fc3nb5rL/2/

A few things to note about CSS3 transitions. It does not know how to interpolate between the z-index     
property, as well as the display property.

answered Sep 25 '14 at 13:38

Justin Medas

211
1
8

sorry about putting all in a code window, stackoverflow told me my fiddle link needed to be indented, so i did that, but wouldn't let me post unless I indented everythin – Justin Medas Sep 25 '14 at 13:39
thanks for helping me i've got my answer, using percentage seemed to do the work – Akshay Sep 25 '14 at 13:44

Animation delay property to change content at fixed intervals

2 Answers2