A simple proof-of-concept: a slideshow animation using CSS3 only
See the demo by Fabrizio Calderan.
<div> | |
<img src="http://dummyimage.com/280x200/56AD30/fff.png&text=1" /> | |
<img src="http://dummyimage.com/280x200/1560f0/fff.png&text=2" /> | |
<img src="http://dummyimage.com/280x200/C03229/fff.png&text=3" /> | |
</div> |
A simple proof-of-concept: a slideshow animation using CSS3 only
See the demo by Fabrizio Calderan.
div { position: relative; } | |
img { | |
position: absolute; | |
top: 0; left: 0; | |
z-index: 3; | |
-webkit-animation: slideshow 12s linear 0s infinite; | |
-moz-animation: slideshow 12s linear 0s infinite; | |
-ms-animation: slideshow 12s linear 0s infinite; | |
-o-animation: slideshow 12s linear 0s infinite; | |
animation: slideshow 12s linear 0s infinite; | |
} | |
img:nth-child(2) { | |
z-index: 2; | |
-webkit-animation-delay: 4s; | |
-moz-animation-delay: 4s; | |
-ms-animation-delay: 4s; | |
-o-animation-delay: 4s; | |
animation-delay: 4s; | |
} | |
img:nth-child(3) { | |
z-index: 1; | |
-webkit-animation-delay: 8s; | |
-moz-animation-delay: 8s; | |
-ms-animation-delay: 8s; | |
-o-animation-delay: 8s; | |
animation-delay: 8s; | |
} | |
@-webkit-keyframes slideshow { | |
25% { opacity: 1;} | |
33.33% { opacity: 0;} | |
91.66% { opacity: 0;} | |
100% { opacity: 1;} | |
} | |
@-moz-keyframes slideshow { | |
25% { opacity: 1;} | |
33.33% { opacity: 0;} | |
91.66% { opacity: 0;} | |
100% { opacity: 1;} | |
} | |
@-ms-keyframes slideshow { | |
25% { opacity: 1;} | |
33.33% { opacity: 0;} | |
91.66% { opacity: 0;} | |
100% { opacity: 1;} | |
} | |
@-o-keyframes slideshow { | |
25% { opacity: 1;} | |
33.33% { opacity: 0;} | |
91.66% { opacity: 0;} | |
100% { opacity: 1;} | |
} | |
@keyframes slideshow { | |
25% { opacity: 1;} | |
33.33% { opacity: 0;} | |
91.66% { opacity: 0;} | |
100% { opacity: 1;} | |
} |