CSS3 Slideshow animation Issue - css

Question

I've been trying to create a CSS3 animations based slider and I am kind of puzzled by the logic behind the animation and keyframes.
here's what I've done: http://jsfiddle.net/fatgamer85/LzGR7
I created a container for the slider and another container inside the slider container which would hold divs or images. In this case I've decided to put in some images for starter.
<div class="slider">
<div class="slide"><span class="image"></span></div>
<div class="slide"><span class="image"></span></div>
<div class="slide"><span class="image"></span></div>
<div class="slide"><span class="image"></span></div>
<div class="slide"><span class="image"></span></div>
</div>
Then using CSS I've absolutely positioned these containers and images.
*, body, html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.slider{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.slide{
position: absolute;
width: 100%;
height: 100%;
}
.slide .image{
float: left;
position: absolute;
}
I've then proceeded to add my animation rules to the .slide class
.slide
{
animation: myanimation 48s ease-in-out infinite;
-webkit-animation: myanimation 48s ease-in-out infinite;
-o-animation: myanimation 48s ease-in-out infinite;
-moz-animation: myanimation 48s ease-in-out infinite;
-ms-animation: myanimation 48s ease-in-out infinite;
}
and added animation rules to each of the class separately using the nth-child pseudo class.
I've observed that the images appear in wrong order, so I added z-index separately to these classes
.slide:nth-child(1){
animation-delay: 0s;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
-ms-animation-delay: 0s;
z-index:1;
}
.slide:nth-child(2){
animation-delay: 8s;
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
z-index:2;
}
..... and so on...
and began adding images to the span
.slide:nth-child(1) .image {
background-image: url('http://i.imgur.com/9yvKmZY.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.slide:nth-child(2) .image {
background-image: url('http://i.imgur.com/j8mBdLD.jpg');
background-repeat: no-repeat;
background-size: cover;
}
..... and so on...
finally added keyframe rules
#-webkit-keyframes myanimation {
0%{
opacity: 1;
}
25% {
opacity: 0;
}
}
Everything looks fine and dandy.. But the problem starts when the Image starts animating.
I quite haven't grasped the concept of animation properly I guess..
Hence the slideshow goes bonkers animating with a mind of its own. Sometimes it doesn't even show the right order of the images or it skips the image completely.
Can anyone tell me what I am doing wrong or where I went wrong?
Here is a full screen example of the slider: http://fiddle.jshell.net/fatgamer85/LzGR7/23/show/light/

Answer 1

There is one thing about slides that makes you loose a lot of time if you don't know it.
If you delay your animations to the future, the first cicle is different from the others. Most of the elements have the properties that come from the static properties, and not from the animation.
To avoid this kind of prpblems, set you animations delay to the past. This way, the first animation cycle is equal to the others.
Also, it is nice to give yourself some help. In this case, I have set numbers to the left of the slide. This way, you can see really what is going on.
Besides, I have fixed a little bit you keyframes, at leats the webkit ones were wrong.
CSS
*, body, html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.slider{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.slide{
position: absolute;
width: 100%;
height: 100%;
animation: myanimation 48s ease-in-out infinite;
-webkit-animation: myanimation 48s ease-in-out infinite;
-o-animation: myanimation 48s ease-in-out infinite;
-moz-animation: myanimation 48s ease-in-out infinite;
-ms-animation: myanimation 48s ease-in-out infinite;
font-size: 100px;
color: red;
}
.slide .image{
float: left;
position: absolute;
}
.slide:nth-child(1){
animation-delay: 0s;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
-ms-animation-delay: 0s;
z-index:5;
}
.slide:nth-child(2){
animation-delay: -40s;
-webkit-animation-delay: -40s;
-moz-animation-delay: -40s;
-o-animation-delay: -40s;
-ms-animation-delay: -40s;
z-index:4;
}
.slide:nth-child(3){
animation-delay: -30s;
-webkit-animation-delay: -30s;
-moz-animation-delay: -30s;
-o-animation-delay: -30s;
-ms-animation-delay: -30s;
z-index:3;
}
.slide:nth-child(4){
animation-delay: -20s;
-webkit-animation-delay: -20s;
-moz-animation-delay: -20s;
-o-animation-delay: -20s;
-ms-animation-delay: -20s;
z-index:2;
}
.slide:nth-child(5){
animation-delay: -10s;
-webkit-animation-delay: -10s;
-moz-animation-delay: -10s;
-o-animation-delay: -10s;
-ms-animation-delay: -10s;
z-index:1;
}
#keyframes myanimation {
0%{ opacity: 0; }
5%{opacity: 1; }
20%{opacity: 1; }
25% {opacity: 0;}
100% {opacity: 0;}
}
#-webkit-keyframes myanimation {
0%{ opacity: 0; }
5%{opacity: 1; }
20%{opacity: 1; }
25% {opacity: 0;}
100% {opacity: 0;}
}
#-o-keyframes myanimation {
0%{ opacity: 1; }
25% { opacity: 0.75; }
50%{ opacity: 0.5; }
75% { opacity: 0.25; }
100%{ opacity: 0; }
}
#-moz-keyframes myanimation {
0%{ opacity: 1; }
25% { opacity: 0.75; }
50%{ opacity: 0.5; }
75% { opacity: 0.25; }
100%{ opacity: 0; }
}
#-ms-keyframes myanimation {
0%{ opacity: 0; }
5%{opacity: 1; }
20%{opacity: 1; }
25% {opacity: 0;}
100% {opacity: 0;}
}
#-webkit-keyframes myanimation {
0%{ opacity: 0; }
5%{opacity: 1; }
20%{opacity: 1; }
25% {opacity: 0;}
100% {opacity: 0;}
}
.slide:nth-child(1) .image {
background-image: url('http://i.imgur.com/9yvKmZY.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.slide:nth-child(2) .image {
background-image: url('http://i.imgur.com/j8mBdLD.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.slide:nth-child(3) .image {
background-image: url('http://i.imgur.com/9VdDjQi.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.slide:nth-child(4) .image {
background-image: url('http://i.imgur.com/dqCWOgW.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.slide:nth-child(5) .image {
background-repeat: no-repeat;
background-image: url('http://i.imgur.com/0hUMMuT.jpg');
background-size: cover;
}
corrected demo
Happy coding !
In the above demo, the 5th image appears for a little bit of time at the start of the animation. This can be corrected adjusting the keyframes:
#keyframes myanimation {
0%{opacity: 1; }
15%{opacity: 1; }
20%{opacity: 0; }
95% {opacity: 0;}
100% {opacity: 1;}
}
If you draw this in a piece of paper, you will see why; but it's difficult to explain
new demo
About your fiddle with the bar, you make 2 errors. The problem is that you think that the bar are somehow "inside" the frame, and are bound to that "time". This is not true, you are working with a cycle of 40s, and the bar has to work with that animation time (not 9 seconds, and frames in fractions of this 9 seconds).
Your best option is to have only 1 bar, and make it cycling faster (at 10 seconds).
CSS
*, body, html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.slider{
position: relative;
overflow: hidden;
width: 100%;
height: 400px;
}
.slide{
position: absolute;
width: 100%;
height: 100%;
animation: bg_anim 50s ease-in-out infinite;
-webkit-animation: bg_anim 50s ease-in-out infinite;
-o-animation: bg_anim 50s ease-in-out infinite;
-moz-animation: bg_anim 50s ease-in-out infinite;
-ms-animation: bg_anim 50s ease-in-out infinite;
}
.slide .image{
float: left;
position: absolute;
}
.slide:nth-child(1){
animation-delay: 0s;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
-ms-animation-delay: 0s;
z-index:5;
}
.slide:nth-child(2){
animation-delay: -40s;
-webkit-animation-delay: -40s;
-moz-animation-delay: -40s;
-o-animation-delay: -40s;
-ms-animation-delay: -40s;
z-index:4;
}
.slide:nth-child(3){
animation-delay: -30s;
-webkit-animation-delay: -30s;
-moz-animation-delay: -30s;
-o-animation-delay: -30s;
-ms-animation-delay: -30s;
z-index:3;
}
.slide:nth-child(4){
animation-delay: -20s;
-webkit-animation-delay: -20s;
-moz-animation-delay: -20s;
-o-animation-delay: -20s;
-ms-animation-delay: -20s;
z-index:2;
}
.slide:nth-child(5){
animation-delay: -10s;
-webkit-animation-delay: -10s;
-moz-animation-delay: -10s;
-o-animation-delay: -10s;
-ms-animation-delay: -10s;
z-index:1;
}
.text{
right: 0px;
color: #fff;
font-size: 28px;
float: right;
z-index:1;
}
.text:nth-child(1){
z-index:5;
}
.text:nth-child(2){
z-index:4;
}
.text:nth-child(3){
z-index:3;
}
.text:nth-child(4){
z-index:2;
}
.text:nth-child(5){
z-index:1;
}
.bar{
position: absolute;
width: 45%;
height: 400px;
right: -20px;
float: right;
z-index: 99;
animation: bar_anim 10s infinite ease-in-out;
-webkit-animation: bar_anim 10s infinite ease-in-out;
-o-animation: bar_anim 10s infinite ease-in-out;
-moz-animation: bar_anim 10s infinite ease-in-out;
-ms-animation: bar_anim 10s infinite ease-in-out;
animation-delay: -1.5s;
-webkit-animation-delay: -1.5s;
-moz-animation-delay: -1.5s;
-o-animation-delay: -1.5s;
-ms-animation-delay: -1.5s;
}
.slide:nth-child(1) > .bar{
animation-delay: 0s;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
-ms-animation-delay: 0s;
}
.slide:nth-child(2) > .bar{
animation-delay: -7.2s;
-webkit-animation-delay: -7.2s;
-moz-animation-delay: -7.2s;
-o-animation-delay: -7.2s;
-ms-animation-delay: -7.2s;
z-index:4;
}
.slide:nth-child(3) > .bar{
animation-delay: -5.4s;
-webkit-animation-delay: -5.4s;
-moz-animation-delay: -5.4s;
-o-animation-delay: -5.4s;
-ms-animation-delay: -5.4s;
z-index:3;
}
.slide:nth-child(4) > .bar{
animation-delay: -3.6s;
-webkit-animation-delay: -3.6s;
-moz-animation-delay: -3.6s;
-o-animation-delay: -3.6s;
-ms-animation-delay: -3.6s;
z-index:2;
}
.slide:nth-child(5) > .bar{
animation-delay: -1.8s;
-webkit-animation-delay: -1.8s;
-moz-animation-delay: -1.8s;
-o-animation-delay: -1.8s;
-ms-animation-delay: -1.8s;
z-index:1;
}
#keyframes bar_anim {
0% { right: -4000px; }
10% { right: 0px; }
15% { right: -20px;}
80% { right: -20px;}
95% { right: 0px; }
100% { right: -4000px; }
}
#-o-keyframes bar_anim {
0%{ right: -4000px; }
10%{ right: 0px; }
15%{ right: -20px; }
80% { right: -20px; }
95% { right: 0px; }
100% { right: -4000px; }
}
#-moz-keyframes bar_anim {
0%{ right: -4000px; }
10%{ right: 0px; }
15%{ right: -20px; }
80% { right: -20px; }
95% { right: 0px; }
100% { right: -4000px; }
}
#-ms-keyframes bar_anim {
0%{ right: -4000px; }
10%{ right: 0px; }
15%{ right: -20px; }
80% { right: -20px; }
95% { right: 0px; }
100% { right: -4000px; }
}
#-webkit-keyframes bar_anim {
0%{ right: -4000px; }
10%{ right: 0px; }
15%{ right: -20px; }
80% { right: -20px; }
95% { right: 0px; }
100% { right: -4000px; }
}
#keyframes bg_anim {
0%{ opacity: 1; }
15%{
opacity: 1;
}
20%{
opacity: 0;
}
95% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes bg_anim {
0%{
opacity: 1;
}
15%{
opacity: 1;
}
20%{
opacity: 0;
}
95% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes bg_anim {
0%{
opacity: 1;
}
15%{
opacity: 1;
}
20%{
opacity: 0;
}
95% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes bg_anim {
0%{
opacity: 1;
}
15%{
opacity: 1;
}
20%{
opacity: 0;
}
95% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes bg_anim {
0%{
opacity: 1;
}
15%{
opacity: 1;
}
20%{
opacity: 0;
}
95% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Alternatively, set 1 span for every slide if you need to, but then keep the animation time and delays.

Answer 2

Based on your code you have grasped the animation (keyframes) correctly. I think the issue is with the z-index, you should remove it. You missed a tiny single detail about the slide nth-child. You must set the nth-childs opacity to 0. I will leave the understanding to you :)
.slide:nth-child(3){
animation-delay: 16s;
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
opacity:0;
}