Reputation: 18891
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!
Upvotes: 9
Views: 5534
Reputation: 406
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>
Upvotes: 12
Reputation: 625
You'll have to add an animation trigger using javascript
window.onload = function (){ }
or jQuery demo
$(window).load(function(){})
as CSS3 animations and transitions start immediately before document load.
Upvotes: 2