问题
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
回答1:
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>回答2:
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>来源：https://stackoverflow.com/questions/28066711/css-fading-animation-delay-timing