CSS fading animation delay timing - html

Question

I'm trying to create a slideshow effect with css3 I have three images which I need to fade into each one another. - each transition needs to last for 3 seconds.
1st image shows for 3seconds then fades to 2nd and same to third
I'm unsure how to work out the percentage for the keyframes.
Codepen http://codepen.io/anon/pen/MYmPYp
#-webkit-keyframes cf4FadeInOut {
0% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 1;
}
92% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes cf4FadeInOut {
0% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 1;
}
92% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes cf4FadeInOut {
0% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 1;
}
92% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes cf4FadeInOut {
0% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 1;
}
92% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.team-img {
position: relative;
height: 329px;
width: 450px;
}
.team-img img {
position: absolute;
left: 0;
z-index: 0;
-webkit-animation-name: cf4FadeInOut;
-moz-animation-name: cf4FadeInOut;
-ms-animation-name: cf4FadeInOut;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-duration: 9s;
-moz-animation-duration: 9s;
-ms-animation-duration: 9s;
}
.team-img img:nth-of-type(1) {
-webkit-animation-name: cf4FadeInOut;
-moz-animation-name: cf4FadeInOut;
-ms-animation-name: cf4FadeInOut;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
}
.team-img img:nth-of-type(2) {
-webkit-animation-name: cf4FadeInOut;
-moz-animation-name: cf4FadeInOut;
-ms-animation-name: cf4FadeInOut;
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
}
.team-img img:nth-of-type(3) {
-webkit-animation-name: cf4FadeInOut;
-moz-animation-name: cf4FadeInOut;
-ms-animation-name: cf4FadeInOut;
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-ms-animation-delay: 9s;
}
<div class="team-img">
<img width="200px" height="200px" src="http://blackdogballroom.co.uk/nws/wp-content/uploads/sites/2/2014/11/BDB-290212-Img-048.jpg">
<img width="200px" height="200px" src="http://3.bp.blogspot.com/-I2TYXJ3lDYw/UFsjvkedaXI/AAAAAAAAE-w/7EYzTeZMpsc/s1600/00Halloween+Spooks.JPG">
<img width="200px" height="200px" src="http://blog.lafraise.com/fr/wp-content/uploads/2013/11/Free-hug-zoneinfinite.jpg">
</div>
I've been racking my brain for a few hours, slowly losing the will. I've googled effortlessly.
Thanks,
Dan

Answer 1

You need to define three different #keyframes to achieve this.
#-webkit-keyframes two {
0% { opacity: 0; }
8.3% { opacity: 0; }
16.6% { opacity: 0; }
24.9% { opacity: 0; }
33.2% { opacity: 1; }
41.5% { opacity: 1; }
49.5% { opacity: 1; }
58.1% { opacity: 1; }
66.4% { opacity: 0; }
74.7% { opacity: 0; }
83% { opacity: 0; }
91.3% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes two {
0% { opacity: 0; }
8.3% { opacity: 0; }
16.6% { opacity: 0; }
24.9% { opacity: 0; }
33.2% { opacity: 1; }
41.5% { opacity: 1; }
49.5% { opacity: 1; }
58.1% { opacity: 1; }
66.4% { opacity: 0; }
74.7% { opacity: 0; }
83% { opacity: 0; }
91.3% { opacity: 0; }
100% { opacity: 0; }
}
#-webkit-keyframes three {
0% { opacity: 0; }
8.3% { opacity: 0; }
16.6% { opacity: 0; }
24.9% { opacity: 0; }
33.2% { opacity: 0; }
41.5% { opacity: 0; }
49.5% { opacity: 0; }
58.1% { opacity: 0; }
66.4% { opacity: 1; }
74.7% { opacity: 1; }
83% { opacity: 1; }
91.3% { opacity: 1; }
100% { opacity: 0; }
}
#keyframes three {
0% { opacity: 0; }
8.3% { opacity: 0; }
16.6% { opacity: 0; }
24.9% { opacity: 0; }
33.2% { opacity: 0; }
41.5% { opacity: 0; }
49.5% { opacity: 0; }
58.1% { opacity: 0; }
66.4% { opacity: 1; }
74.7% { opacity: 1; }
83% { opacity: 1; }
91.3% { opacity: 1; }
100% { opacity: 0; }
}
.team-img {
position: relative;
height: 329px;
width: 450px;
}
.team-img img {
position: absolute;
left: 0;
z-index: 0;
}
.team-img img:nth-of-type(2) {
-webkit-animation: two 11s ease-in-out infinite forwards;
animation: two 11s ease-in-out infinite forwards;
}
.team-img img:nth-of-type(3) {
-webkit-animation: three 11s ease-in-out infinite forwards;
animation: three 11s ease-in-out infinite forwards;
}
<div class="team-img">
<img width="200px" height="200px" src="http://blackdogballroom.co.uk/nws/wp-content/uploads/sites/2/2014/11/BDB-290212-Img-048.jpg">
<img width="200px" height="200px" src="http://3.bp.blogspot.com/-I2TYXJ3lDYw/UFsjvkedaXI/AAAAAAAAE-w/7EYzTeZMpsc/s1600/00Halloween+Spooks.JPG">
<img width="200px" height="200px" src="http://blog.lafraise.com/fr/wp-content/uploads/2013/11/Free-hug-zoneinfinite.jpg">
</div>

Answer 2

You don't need to animate the first image, only the second and third. It makes a code much shorter:
.team-img {
position: relative;
height: 329px;
width: 450px;
}
.team-img img {
position: absolute;
left: 0;
top: 0;
}
.team-img img:nth-of-type(2) {
opacity: 0;
-webkit-animation: fading2 ease 14s infinite;
animation: fading2 ease 14s infinite;
}
.team-img img:nth-of-type(3) {
opacity: 0;
-webkit-animation: fading3 ease 14s infinite;
animation: fading3 ease 14s infinite;
}
#-webkit-keyframes fading2 {
0%: { opacity: 0;}
21% { opacity: 0;}
35% { opacity: 1;}
93% { opacity: 1;}
100% { opacity: 0;}
}
#keyframes fading2 {
0%: { opacity: 0;}
21% { opacity: 0;}
35% { opacity: 1;}
93% { opacity: 1;}
100% { opacity: 0;}
}
#-webkit-keyframes fading3 {
0%: { opacity: 0;}
56% { opacity: 0;}
70% { opacity: 1;}
93% { opacity: 1;}
100% { opacity: 0;}
}
#keyframes fading3 {
0%: { opacity: 0;}
56% { opacity: 0;}
70% { opacity: 1;}
93% { opacity: 1;}
100% { opacity: 0;}
}
<div class="team-img">
<img width="200px" height="200px" src="http://blackdogballroom.co.uk/nws/wp-content/uploads/sites/2/2014/11/BDB-290212-Img-048.jpg">
<img width="200px" height="200px" src="http://3.bp.blogspot.com/-I2TYXJ3lDYw/UFsjvkedaXI/AAAAAAAAE-w/7EYzTeZMpsc/s1600/00Halloween+Spooks.JPG">
<img width="200px" height="200px" src="http://blog.lafraise.com/fr/wp-content/uploads/2013/11/Free-hug-zoneinfinite.jpg">
</div>