Add animation delay to li automatically - css

I have a slideshow with CSS3 which have animation-delay in each child,
but this is not dynamic because for each tag I should add nth-child ,
Is there any way to add animation-delay automatically to li tags?
this is CSS code:
.cb-slideshow li:nth-child(2) span {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
I want to change this code to add 6s delay to each tags.

There is no way to handle it dynamically except adding inline style dynamically or with javascript
for example
.cb-slideshow li {
animation: FadeIn 1s linear;
animation-fill-mode: both;
}
#keyframes FadeIn {
0% {
opacity: 0;
transform: scale(.1);
}
85% {
opacity: 1;
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
<div class="cb-slideshow">
<li style="animation-delay: 1s;">test text</li>
<li style="animation-delay: 2s;">test text</li>
<li style="animation-delay: 3s;">test text</li>
<li style="animation-delay: 4s;">test text</li>
<li style="animation-delay: 5s;">test text</li>
</div>

You could use PHP to dynamically echo each part of the style, or intergrate it right into the css.
For example
.button:hover {
border: 10px solid;
transition: <?php echo $lot ?>;
}
Where $lot is the animation time.
I dont know how to get the nth-child(N) in php, but there is undoubtably a way.
Sorry if this wasn't very useful, just wanted to say that php would be a good way to do it.

Related

CSS slideshow - How can I add a link to the image?

How can I add a link to these images. I've tried many variations of slideshows but find when I add links it starts not displaying every other image. In my code below I have the links commented out. If I remove the links the images display fine.
I have repeated the images twice just trying to debug and have _parent tag in the link because this page will be displayed in an iframe.
Your help would be greatly appreciated. Thank you for your time reading this post.
HTML
<div class="slider">
<img class='photo' src="featuredProducts/On-Semi-Python-sensors-sm.png"/>
</div>
CSS
.slider {
margin: 0;
width: 180px;
height: 1504px;
overflow: hidden;
position: relative;
}
.photo {
position: absolute;
-webkit-animation: round 16s infinite;
opacity: 0;
width: 100%;
}
#-webkit-keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
.slider img:nth-child(4) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
-o-animation-delay: 12s;
animation-delay: 12s;
}
.slider img:nth-child(3) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-ms-animation-delay: 8s;
-o-animation-delay: 8s;
animation-delay: 8s;
}
.slider img:nth-child(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
.slider img:nth-child(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
The problem is correctly with your links.
You have <img> inside anchor, but you try to hide img and leaves its parent anchor visible.
It is impossiple after that to make another image visible until the left parent anchor is hidden. Thus you see a blank white area until time passes to hide this left anchor and a new img can appear.
Solution is to hide the parent anchor of each img to have the right effect.
There are two steps:
HTML : Change class photo from img to anchor
CSS : Change selector to .slider a:nth-child(...)
This modified code works
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
<div class="slider">
<!--
<img class='photo' src="1.jpg" alt="" />
<img class='photo' src="2.jpg" alt="" />
<img class='photo' src="3.jpg" alt="" />
-->
<a class='photo' href="http://www.google.com" target="_parent" ><img src="1.jpg" alt="On Semi PYTHON sensors" /></a>
<a class='photo' href="http://www.youtube.com" target="_parent" ><img src="2.jpg" alt="" /></a>
<a class='photo' href="http://www.pinterest.com" target="_parent" ><img src="3.jpg" alt="" /></a>
<a class='photo' href="http://www.facebook.com" target="_parent" ><img src="4.jpg" alt="" /></a>
</div>
</body>
</html>
CSS
.slider { margin: 0; width: 180px; height: 1504px; overflow: hidden; position: relative; }
.photo { position: absolute; -webkit-animation: round 16s infinite; opacity: 0; width: 100%; }
#-webkit-keyframes round { 25% { opacity: 1; } 40% { opacity: 0; } }
.slider a:nth-child(4) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
-o-animation-delay: 12s;
animation-delay: 12s;
}
.slider a:nth-child(3) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-ms-animation-delay: 8s;
-o-animation-delay: 8s;
animation-delay: 8s;
}
.slider a:nth-child(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
.slider a:nth-child(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
Thats because of position: absolute for the images with photo class. You my remove the position: absolute from photo and add it to a elements instead.
.slider a{
position: absolute;
display: block;
}
.photo {
-webkit-animation: round 16s infinite;
opacity: 0;
width: 100%;
}
just replace .slide img with .slide a
.slider {
margin: 0;
width: 180px;
height: 1504px;
overflow: hidden;
position: relative;
}
a {
position: absolute;
-webkit-animation: round 16s infinite;
opacity: 0;
}
img {
width: 100%;
}
#-webkit-keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
.slider a:nth-child(4) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
-o-animation-delay: 12s;
animation-delay: 12s;
}
.slider a:nth-child(3) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-ms-animation-delay: 8s;
-o-animation-delay: 8s;
animation-delay: 8s;
}
.slider a:nth-child(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
.slider a:nth-child(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
<div class="slider">
<img class='photo' src="http://i.imgur.com/IMiabf0.jpg" alt="On Semi PYTHON sensors" />
<img class='photo' src="http://i.imgur.com/NqCM7jH.jpg" alt="" />
<img class='photo' src="http://i.imgur.com/cjN8Qoa.jpg" alt="" />
<img class='photo' src="http://i.imgur.com/WQ2RS6O.png" alt="" />
</div>
The code below helped. The images display nicely, but I need to link to separate pages for the images. Even when another image is displayed, the first link is active - in other words the links aren't mapping link2 with image2, link3 with image3...
Please take a look below and let me know if you see how to fix it. Thank you!
.slider {
margin: 0;
width: 180px;
height: 1504px;
overflow: hidden;
position: relative;
}
.slider a {
position: absolute;
-webkit-animation: round 16s infinite;
opacity: 0;
}
img {
width: 100%;
}
#-webkit-keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
.slider a:nth-child(4) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
-o-animation-delay: 12s;
animation-delay: 12s;
}
.slider a:nth-child(3) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-ms-animation-delay: 8s;
-o-animation-delay: 8s;
animation-delay: 8s;
}
.slider a:nth-child(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
.slider a:nth-child(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
<div class="slider">
<img class='photo' src="http://i.imgur.com/IMiabf0.jpg" alt="On Semi PYTHON sensors" />
<img class='photo' src="http://i.imgur.com/NqCM7jH.jpg" alt="" />
<img class='photo' src="http://i.imgur.com/cjN8Qoa.jpg" alt="" />
<img class='photo' src="http://i.imgur.com/WQ2RS6O.png" alt="" />
</div>

Animated text gets hidden after completion of the animation

I had tried a simple animation. See this fiddle.
HTML:
<div class="special_sec">
<span class="sub_heading">About Us</span>
<span class="sub_heading1">Services</span>
<span class="sub_heading2">Portfolio</span>
<span class="sub_heading3">Clients</span>
<span class="sub_heading4">Contact Us</span>
</div>
CSS:
.special_sec span {
font-size:30px;
list-style:none;
text-align:center;
padding:10px 0;
display:block;
animation:subheadinganimation 17s;
color: transparent;
}
In my CSS (.special_sec span), I have added color: transparent.
My problem is:
If color is transparent, after the animation all the text are getting hidden. See my fiddle.
If I remove this color property, all the text are initially visible. Then the animation also runs. See this fiddle.
I want the text to be visible only after the delay timings that I have given. I can't understand the problem. What is the issue? How can I fix this?
You need to set the animation-fill-mode as forwards so that the element would hold the state as at the final keyframe of the animation (which is color: #000). Without this setting, the element reverts back to its original state (color: transparent) after the animation is complete.
animation: subheadinganimation 17s forwards;
#keyframes subheadinganimation {
0%, 30% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
33%,
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
color: #000;
}
}
.special_sec span {
font-size: 30px;
list-style: none;
text-align: center;
padding: 10px 0;
display: block;
animation: subheadinganimation 17s forwards;
color: transparent;
}
span.sub_heading {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
span.sub_heading1 {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
span.sub_heading2 {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
span.sub_heading3 {
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
}
span.sub_heading4 {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="special_sec">
<span class="sub_heading">About Us</span>
<span class="sub_heading1">Services</span>
<span class="sub_heading2">Portfolio</span>
<span class="sub_heading3">Clients</span>
<span class="sub_heading4">Contact Us</span>
</div>

CSS3 Animation Delay Times

I am trying to make each image display at equal lengths of time, however the last image (12) seems to get stuck, then it shifts to image 3 instead instead of image 1 to start the animation again?
I have set the animation to last 4 seconds which is 48/12 images. Really can't figure out why image 12 transitions to image 3 instead of 1??
HTML
<div id="container">
<div id="crossfade">
<img src="images/img1.jpg">
<img src="images/img2.jpg">
<img src="images/img3.jpg">
<img src="images/img4.jpg">
<img src="images/img5.jpg">
<img src="images/img6.jpg">
<img src="images/img7.jpg">
<img src="images/img8.jpg">
<img src="images/img9.jpg">
<img src="images/img10.jpg">
<img src="images/img11.jpg">
<img src="images/img12.jpg">
</div>
</div>
CSS
#fadecontainer {
position: relative;
margin-bottom: 390px;
}
#crossfade > img {
position: absolute;
top: 10px;
left: 0px;
color: transparent;
border: 1px solid #000000;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 48s linear infinite 0s;
-moz-animation: imageAnimation 48s linear infinite 0s;
-o-animation: imageAnimation 48s linear infinite 0s;
-ms-animation: imageAnimation 48s linear infinite 0s;
animation: imageAnimation 48s linear infinite 0s;
}
#crossfade > img:nth-child(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
#crossfade > img:nth-child(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
}
#crossfade > img:nth-child(3) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
}
#crossfade > img:nth-child(4) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#crossfade > img:nth-child(5) {
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s;
}
#crossfade > img:nth-child(6) {
-webkit-animation-delay: 20s;
-moz-animation-delay: 20s;
-o-animation-delay: 20s;
-ms-animation-delay: 20s;
animation-delay: 20s;
}
#crossfade > img:nth-child(7) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
#crossfade > img:nth-child(8) {
-webkit-animation-delay: 28s;
-moz-animation-delay: 28s;
-o-animation-delay: 28s;
-ms-animation-delay: 28s;
animation-delay: 28s;
}
#crossfade > img:nth-child(9) {
-webkit-animation-delay: 32s;
-moz-animation-delay: 32s;
-o-animation-delay: 32s;
-ms-animation-delay: 32s;
animation-delay: 32s;
}
#crossfade > img:nth-child(10) {
-webkit-animation-delay: 36s;
-moz-animation-delay: 36s;
-o-animation-delay: 36s;
-ms-animation-delay: 36s;
animation-delay: 36s;
}
#crossfade > img:nth-child(11) {
-webkit-animation-delay: 40s;
-moz-animation-delay: 40s;
-o-animation-delay: 40s;
-ms-animation-delay: 40s;
animation-delay: 40s;
}
#crossfade > img:nth-child(12) {
-webkit-animation-delay: 44s;
-moz-animation-delay: 44s;
-o-animation-delay: 44s;
-ms-animation-delay: 44s;
animation-delay: 44s;
}
#-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
4% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
25% { opacity: 1 }
30% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
4% { opacity: 1;
-moz-animation-timing-function: ease-out; }
25% { opacity: 1 }
30% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
4% { opacity: 1;
-o-animation-timing-function: ease-out; }
25% { opacity: 1 }
30% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
4% { opacity: 1;
-ms-animation-timing-function: ease-out; }
25% { opacity: 1 }
30% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
4% { opacity: 1;
animation-timing-function: ease-out; }
25% { opacity: 1 }
30% { opacity: 0 }
100% { opacity: 0 }
}
Ignoring the inconsistencies in animation-duration among browsers, the math of your animation is off. The issue is because of how long you have opacity:1 in the animation. This is because 25% - 4% = 21% and 21% * 12 > 100%. The difference should instead be more like 100% / 12 = 8.333333%,
#keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
2% { opacity: 1; animation-timing-function: ease-out; }
8.333% { opacity: 1 }
10% { opacity: 0 }
100% { opacity: 0 }
}
You have to prefix the animations to get cross-browser performance of course

How do I add more images to my cb-slideshow?

The slides work for images 1-6 (original code), but I need 13 images to display. Here is what I did and thought it would work, but it doesn't. It still only plays the first 6 images. Originally the 70s were 36s. I don't know what I am doing wrong/missing??
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: -1;
}
.cb-slideshow:after {
content: '';
background: transparent url(../images/pattern.png) repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 70s linear infinite 0s;
-moz-animation: imageAnimation 70s linear infinite 0s;
-o-animation: imageAnimation 70s linear infinite 0s;
-ms-animation: imageAnimation 70s linear infinite 0s;
animation: imageAnimation 70s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
-webkit-animation: titleAnimation 70s linear infinite 0s;
-moz-animation: titleAnimation 70s linear infinite 0s;
-o-animation: titleAnimation 70s linear infinite 0s;
-ms-animation: titleAnimation 70s linear infinite 0s;
animation: titleAnimation 70s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(../images/slides/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../images/slides/2.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(../images/slides/3.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(../images/slides/4.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(../images/slides/5.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(../images/slides/6.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-slideshow li:nth-child(7) span {
background-image: url(../images/slides/7.jpg);
-webkit-animation-delay: 36s;
-moz-animation-delay: 36s;
-o-animation-delay: 36s;
-ms-animation-delay: 36s;
animation-delay: 36s;
}
.cb-slideshow li:nth-child(8) span {
background-image: url(../images/slides/8.jpg);
-webkit-animation-delay: 42s;
-moz-animation-delay: 42s;
-o-animation-delay: 42s;
-ms-animation-delay: 42s;
animation-delay: 42s;
}
.cb-slideshow li:nth-child(9) span {
background-image: url(../images/slides/9.jpg);
-webkit-animation-delay: 48s;
-moz-animation-delay: 48s;
-o-animation-delay: 48s;
-ms-animation-delay: 48s;
animation-delay: 48s;
}
.cb-slideshow li:nth-child(10) span {
background-image: url(../images/slides/10.jpg);
-webkit-animation-delay: 54s;
-moz-animation-delay: 54s;
-o-animation-delay: 54s;
-ms-animation-delay: 54s;
animation-delay: 54s;
}
.cb-slideshow li:nth-child(11) span {
background-image: url(../images/slides/11.jpg);
-webkit-animation-delay: 60s;
-moz-animation-delay: 60s;
-o-animation-delay: 60s;
-ms-animation-delay: 60s;
animation-delay: 60s;
}
.cb-slideshow li:nth-child(12) span {
background-image: url(../images/slides/12.jpg);
-webkit-animation-delay: 64s;
-moz-animation-delay: 64s;
-o-animation-delay: 64s;
-ms-animation-delay: 64s;
animation-delay: 64s;
}
.cb-slideshow li:nth-child(13) span {
background-image: url(../images/slides/13.jpg);
-webkit-animation-delay: 70s;
-moz-animation-delay: 70s;
-o-animation-delay: 70s;
-ms-animation-delay: 70s;
animation-delay: 70s;
}
.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-slideshow li:nth-child(7) div {
-webkit-animation-delay: 36s;
-moz-animation-delay: 36s;
-o-animation-delay: 36s;
-ms-animation-delay: 36s;
animation-delay: 36s;
}
.cb-slideshow li:nth-child(8) div {
-webkit-animation-delay: 42s;
-moz-animation-delay: 42s;
-o-animation-delay: 42s;
-ms-animation-delay: 42s;
animation-delay: 42s;
}
.cb-slideshow li:nth-child(9) div {
-webkit-animation-delay: 48s;
-moz-animation-delay: 48s;
-o-animation-delay: 48s;
-ms-animation-delay: 48s;
animation-delay: 48s;
}
.cb-slideshow li:nth-child(10) div {
-webkit-animation-delay: 54s;
-moz-animation-delay: 54s;
-o-animation-delay: 54s;
-ms-animation-delay: 54s;
animation-delay: 54s;
}
.cb-slideshow li:nth-child(11) div {
-webkit-animation-delay: 60s;
-moz-animation-delay: 60s;
-o-animation-delay: 60s;
-ms-animation-delay: 60s;
animation-delay: 60s;
}
.cb-slideshow li:nth-child(12) div {
-webkit-animation-delay: 64s;
-moz-animation-delay: 64s;
-o-animation-delay: 64s;
-ms-animation-delay: 64s;
animation-delay: 64s;
}
.cb-slideshow li:nth-child(13) div {
-webkit-animation-delay: 70s;
-moz-animation-delay: 70s;
-o-animation-delay: 70s;
-ms-animation-delay: 70s;
animation-delay: 70s;
}
/* Animation for the slideshow images */
#-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
/* Animation for the title */
#-webkit-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
#media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 140px }
}
#media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 80px }
}
Without seeing your HTML to verify, I would bet that you are missing the extra li, span and div elements needed to go beyond the original six.
You should have a total of 13 li elements with span and div elements defined for each.
You may also want to clear your cache...just in case. ;)

How to force CSS3 slideshow animation to display in correct order?

I have 4 images on my webpage. I am using CSS to fade from one image to the next in an infinite loop. I want to force the direction of the 'slideshow' so that it starts with the first image referenced in html and sequentially moves through to the fourth (1 -> 2 -> 3-> 4) and then returns to the start and loops indefinitely.
If I try specifying the correct order in CSS, the fourth image displays first with a long delay before entering the loop from the beginning.
I can only really get the images looping properly in reverse order - that is to say 4,3,2,1. I wouldn't mind so much except that I plan to fall-back to jQuery Cycle Lite for browsers that don't support CSS3 and I know that Cycle Lite will loop in the order that the images are referenced in markup (1,2,3,4 etc).
My code is as follows:
HTML
<div id="cf4a" class="shadow">
<img alt="Image1" src="../Banners/Image1.png" />
<img alt="Image2" src="../Banners/Image2.png" />
<img alt="Image3" src="../Banners/Image3.png" />
<img alt="Image4" src="../Banners/Image4.png" />
</div>
CSS
#-webkit-keyframes cf4FadeInOut {
0% {opacity:1;}
19% {opacity:1;}
25% {opacity:0;}
94% {opacity:0;}
100% {opacity:1;}
}
#-moz-keyframes cf4FadeInOut {
0% {opacity:1;}
19% {opacity:1;}
25% {opacity:0;}
94% {opacity:0;}
100% {opacity:1;}
}
#-o-keyframes cf4FadeInOut {
0% {opacity:1;}
19% {opacity:1;}
25% {opacity:0;}
94% {opacity:0;}
100% {opacity:1;}
}
#keyframes cf4FadeInOut {
0% {opacity:1;}
19% {opacity:1;}
25% {opacity:0;}
94% {opacity:0;}
100% {opacity:1;}
}
#cf4a {
position:relative;
height:350px;
width:990px;
margin:30px auto;
}
#cf4a img {
position:absolute;
left:0;
}
#cf4a img {
-webkit-animation-name: cf4FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 32s;
-moz-animation-name: cf4FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 32s;
-o-animation-name: cf4FadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 32s;
animation-name: cf4FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 32s;
}
#cf4a img:nth-of-type(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
#cf4a img:nth-of-type(2) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
animation-delay: 8s;
}
#cf4a img:nth-of-type(3) {
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
animation-delay: 16s;
}
#cf4a img:nth-of-type(4) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
animation-delay: 24s;
}
So, if anyone can advise on how to get my slideshow working without showing the 4th slide for 24 seconds before behaving itself, I'd be very grateful.
Thanks and sorry for the long post.
Leon
In your case the easiest would be to change their z-index
#cf4a img:nth-of-type(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
z-index:4;
}
#cf4a img:nth-of-type(2) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
animation-delay: 8s;
z-index:3;
}
#cf4a img:nth-of-type(3) {
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
animation-delay: 16s;
z-index:2;
}
#cf4a img:nth-of-type(4) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
animation-delay: 24s;
z-index:1;
}
Demo at http://jsfiddle.net/gaby/ZUErm/

Resources