CSS 3 animation, Stop the animation at the last image Options

[meghnash]

My question is concerning how to make the animation stop at the last image. As of now the last image eases out into a blank page instead of staying on the image 5. Would really appreciate help in this matter.

.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}

.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 36s linear 1 0s;
-moz-animation: imageAnimation 36s linear 1 0s;
-o-animation: imageAnimation 36s linear 1 0s;
-ms-animation: imageAnimation 36s linear 1 0s;
animation: imageAnimation 36s linear 1 0s;
}

ul li{
margin:0;
padding:0;
}

ul{
list-style:none;
}

li{
display:list-item;
}


.cb-slideshow li:nth-child(1) span {
background-image: url(../images/img1.jpg)
}

.cb-slideshow li:nth-child(2) span {
background-image: url(../images/img2.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/img3.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}

ul li{
margin:0;
padding:0;
}

ul{
list-style:none;
}

li{
display:list-item;
}


.cb-slideshow li:nth-child(1) span {
background-image: url(../images/img1.jpg)
}

.cb-slideshow li:nth-child(2) span {
background-image: url(../images/img2.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/img3.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}

@-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 }
}

.no-cssanimations .cb-slideshow li span{
opacity: 1;
}

[Christian J]

My question is concerning how to make the animation stop at the last image.

Could an animation-fill-mode of forwards achieve that?

In the meantime I suggest using a simpler test code until the basics are sorted out. There's no point in using complex things like CSS backgrounds on span elements inside list items or applying cross-browser hacks at this stage. Also the code example above contains duplicates, which doesn't make debugging any easier.

[meghnash]

My question is concerning how to make the animation stop at the last image.

Could an animation-fill-mode of forwards achieve that?

In the meantime I suggest using a simpler test code until the basics are sorted out. There's no point in using complex things like CSS backgrounds on span elements inside list items or applying cross-browser hacks at this stage. Also the code example above contains duplicates, which doesn't make debugging any easier.

Thank you very much. Like you suggested I will have to rewrite the code. Thanks so much.

[pandy]

Why don't you let the animation loop as in the demo?
http://tympanus.net/codrops/2012/01/02/ful...show-with-css3/

If you don't want that I think it should be possible to make the last animation stay or maybe have a static background behind it all that shows when none of the animation backgrounds does (all their opacities are 0). I haven't tried animation much, so I'm just guessing here.

[pandy]

The static background was a stupid idea. It would of course show through during the fade out of each image...

[pandy]

CODE

    animation: imageAnimation 36s linear 1 0s;

What property (not shorthand) is 'linear' a value for? I skimmed through the spec and I don't find any that takes that value. I thought it was for animation-iteration-count but it only takes 'infinite' (as in the demo, to make it loop) or a number.

[Christian J]

What property (not shorthand) is 'linear' a value for? I skimmed through the spec and I don't find any that takes that value. I thought it was for animation-iteration-count but it only takes 'infinite' (as in the demo, to make it loop) or a number.

Could it be animation-timing-function? I'm more puzzled by the last "0s" value.

[meghnash]

CODE

    animation: imageAnimation 36s linear 1 0s;

What property (not shorthand) is 'linear' a value for? I skimmed through the spec and I don't find any that takes that value. I thought it was for animation-iteration-count but it only takes 'infinite' (as in the demo, to make it loop) or a number.

I deleted the 0s. It was just redundant code.

[Frederiek]

The 0s is not redundant as such, it's the initial value for animation-duration. But, I guess, it does no harm leaving it out, though I'm not vey familiar with animations either.
"linear" is a value of animation-timing-function.
"infinite" is a value of animation-iteration-count.

See:
http://dev.w3.org/csswg/css-animations/
http://css-tricks.com/snippets/css/keyfram...imation-syntax/

I think Pandy is right, you need the animation-iteration-count, which you can set to (the initial value of) 1 instead of infinite.
See http://dev.w3.org/csswg/css-animations/#an...-count-property .

[pandy]

What property (not shorthand) is 'linear' a value for? I skimmed through the spec and I don't find any that takes that value. I thought it was for animation-iteration-count but it only takes 'infinite' (as in the demo, to make it loop) or a number.

Could it be animation-timing-function? I'm more puzzled by the last "0s" value.

I don't understand what values that takes, apart from the initial 'ease'. http://www.w3.org/TR/css3-animations/#anim...timing-function and http://www.w3.org/TR/css3-animations/#CSS3-TRANSITIONS just link to each other and it never gets explained.

[pandy]

Here's some kind of explanation. It doesn't seem related to the problem.
http://www.css3files.com/animation/

[pandy]

I think Pandy is right, you need the animation-iteration-count, which you can set to (the initial value of) 1 instead of infinite.
See http://dev.w3.org/csswg/css-animations/#an...-count-property .

Sorry, I didn't see your post. He has a 1 in there though.

[Christian J]

What property (not shorthand) is 'linear' a value for? I skimmed through the spec and I don't find any that takes that value. I thought it was for animation-iteration-count but it only takes 'infinite' (as in the demo, to make it loop) or a number.

Could it be animation-timing-function? I'm more puzzled by the last "0s" value.

I don't understand what values that takes, apart from the initial 'ease'. http://www.w3.org/TR/css3-animations/#anim...timing-function and http://www.w3.org/TR/css3-animations/#CSS3-TRANSITIONS just link to each other and it never gets explained.

There's a list of values here: http://www.w3.org/TR/2012/WD-css3-transiti...nction-property

[pandy]

Why isn't that page linked from the two I linked to?

[Christian J]

I did reach it from your second link.

[pandy]

[Christian J]

BTW I advice against using this kind of CSS slideshow. It doesn't work in older browsers, and no suitable fallback is provided ("For browsers that don’t support animations, we’ll simply show the last slideshow image"). Assuming the images are mean to be content (and not just styling), they should be embedded with IMG elements instead of CSS backgrounds, and a proper fallback should display all the images.