<div class="container">
<img src="http://mrg.bz/HYuRbQ">
<img src="http://mrg.bz/H1qdIq">
<img src="http://mrg.bz/ToIsxz">
<img src="http://mrg.bz/pA0lyL">
<img src="http://mrg.bz/euedOa">
<img src="http://mrg.bz/beVsO7">
<img src="http://mrg.bz/GLVvgh">
<img src="http://mrg.bz/qcbYU6">
</div>
<style>
.container {
position:relative;
}
.container img {
position:absolute;
}
</style>
<style>
@keyframes xfade{
0%{
opacity: 1;
}
12.5% {
opacity:1;
}
16.6% {
opacity:0;
}
96% {
opacity:0;
}
100% {
opacity:1;
}
}
</style>
Transition Time * 100 / Slideshow Total Time = ?
5 seconds * 100 / 120 seconds = 4.1 (percent)
.container img:nth-child(8) {
animation: xfade 120s 0s infinite;
}
.container img:nth-child(7) {
animation: xfade 120s 15s infinite;
}
<style>
.container img:nth-child(8) {
animation: xfade 120s 0s infinite;
}
.container img:nth-child(7) {
animation: xfade 120s 15s infinite;
}
.container img:nth-child(6) {
animation: xfade 120s 30s infinite;
}
.container img:nth-child(5) {
animation: xfade 120s 45s infinite;
}
.container img:nth-child(4) {
animation: xfade 120s 60s infinite;
}
.container img:nth-child(3) {
animation: xfade 120s 75s infinite;
}
.container img:nth-child(2) {
animation: xfade 120s 90s infinite;
}
.container img:nth-child(1) {
animation: xfade 120s 105s infinite;
}
</style>
.container img:nth-child(8) {
-webkit-animation: xfade 120s 0s infinite;
animation: xfade 120s 0s infinite;
}
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (10)
Author
Commented:Commented:
Author
Commented:Commented:
Commented:
View More