Menu
Works correctly on my local filesystem, not from a server. It is starting out of sync for some reason. Thanks for any help. Only vendor prefixed for WebKit. Tested in Chrome 26.Demo: http://cssdesk.com/jjqKK
HTML:
<ul class="slides">
<li><img src="http://placehold.it/200x100" /><span class="caption">Image 1</span></li>
<li><img src="http://placehold.it/200x100" /><span class="caption">Image 2</span></li>
<li><img src="http://placehold.it/200x100" /><span class="caption">Image 3</span></li>
</ul>
CSS:
ul.slides{
position: relative;
background: #000;
height: 100px;
width: 200px;
padding: 0;
}
ul.slides li{
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
height: inherit;
width: inherit;
padding: 0;
margin: 0;
-webkit-animation: slideshow 9s linear infinite;
}
ul.slides.clickpause:active li{
-webkit-animation-play-state:paused;
}
ul.slides li:nth-child(1){ -webkit-animation-delay: 0s; }
ul.slides li:nth-child(2){ -webkit-animation-delay: 3s; }
ul.slides li:nth-child(3){ -webkit-animation-delay: 6s; }
@-webkit-keyframes slideshow{
0%{
opacity: 0;
z-index: 2;
}
3%{
opacity: 1;
}
30%{
opacity: 1;
}
33%{
opacity: 0;
}
34%{
z-index: 1;
}
100%{
opacity: 0;
}
}
ul.slides li img{
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
padding: 0;
margin: 0
}
ul.slides li span{
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
background: rgba(40, 40, 40, 0.8);
color: #FFF;
padding: 5px
}
Demo: http://cssdesk.com/jjqKK
Please no answers that use JavaScript. Thanks!
661
Your animations might not always start at the same time.
I've found that negative delays work really well with keeping things in sync. With this technique, each animation will load at the same time, but some parts start in the past. Check out the jsbin example:
http://jsbin.com/EreYIdE/2/edit
edited to add example inline:
ul {
background: #000;
height: 100px;
padding: 0;
position: relative;
width: 200px;
}
li {
height: inherit;
margin: 0;
opacity: 0;
padding: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: inherit;
-webkit-animation: slideshow 9s linear infinite;
animation: slideshow 9s linear infinite;
}
li:nth-child(1) {
-webkit-animation-delay: -9s;
animation-delay: -9s;
}
li:nth-child(2) {
-webkit-animation-delay: -6s;
animation-delay: -6s;
}
li:nth-child(3) {
-webkit-animation-delay: -3s;
animation-delay: -3s;
}
@-webkit-keyframes slideshow {
0% {
opacity: 0;
}
3% {
opacity: 1;
}
30% {
opacity: 1;
}
33% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes slideshow {
0% {
opacity: 0;
}
3% {
opacity: 1;
}
30% {
opacity: 1;
}
33% {
opacity: 0;
}
100% {
opacity: 0;
}
}
img {
margin: 0;
padding: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
span {
background: rgba(40, 40, 40, 0.8);
color: #fff;
padding: 5px;
position: absolute;
right: 0;
bottom: 0;
left: 0;
}<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul>
<li>
<img src="http://placehold.it/200x100">
<span>Image 1</span>
<li>
<img src="http://placehold.it/200x100">
<span>Image 2</span>
<li>
<img src="http://placehold.it/200x100">
<span>Image 3</span>
</ul>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
