I can't understand why is mine code doesn't work properly. Please tell me, why is the animation-timing-function with cubic-bezier doesn't work.
https://jsfiddle.net/r5zade69/
<div class="testing">
</div>
.testing {
width: 100px;
height: 30px;
background: #000077;
position: absolute;
visibility: hidden;
opacity: 0;
left: -100px;
-webkit-animation-timing-function: cubic-bezier(.78,.2,.95,.63);
animation-timing-function: cubic-bezier(.78,.2,.95,.63);
-webkit-animation: testing-a 5s 1 1s;
-moz-animation: testing-a 5s 1 1s;
-ms-animation: testing-a 5s 1 1s;
-o-animation: testing-a 5s 1 1s;
animation: testing-a 5s 1 1s;
}
#-webkit-keyframes testing-a {
0% { left:-100px; opacity: 1; visibility:visible;}
98% { left:100%; opacity: 1; visibility:visible;}
99% { left:100%; opacity: 0; visibility:hidden;}
100% { left:-100px; opacity: 0; visibility:hidden;}
}
#keyframes testing-a {
0% { left:-100px; opacity: 1; visibility:visible;}
98% { left:100%; opacity: 1; visibility:visible;}
99% { left:100%; opacity: 0; visibility:hidden;}
100% { left:-100px; opacity: 0; visibility:hidden;}
}
Your issue lies withing the hierarchy of your CSS.
You declare the timing function before the animation, and it gets overwritten.
Check this fiddle - the difference is the order of the properties :)
animation: testing-a 5s 1 1s;
-webkit-animation-timing-function: cubic-bezier(.78,.2,.95,.63);
animation-timing-function: cubic-bezier(.78,.2,.95,.63);
Put you css code in 'style' tag in 'head' tag section. below is the example
<style type="text/css">
.testing {
width: 100px;
height: 30px;
background: #000077;
position: absolute;
visibility: hidden;
opacity: 0;
left: -100px;
-webkit-animation-timing-function: cubic-bezier(.78,.2,.95,.63);
animation-timing-function: cubic-bezier(.78,.2,.95,.63);
-webkit-animation: testing-a 5s 1 1s;
-moz-animation: testing-a 5s 1 1s;
-ms-animation: testing-a 5s 1 1s;
-o-animation: testing-a 5s 1 1s;
animation: testing-a 5s 1 1s;
}
#-webkit-keyframes testing-a {
0% { left:-100px; opacity: 1; visibility:visible;}
98% { left:100%; opacity: 1; visibility:visible;}
99% { left:100%; opacity: 0; visibility:hidden;}
100% { left:-100px; opacity: 0; visibility:hidden;}
}
#keyframes testing-a {
0% { left:-100px; opacity: 1; visibility:visible;}
98% { left:100%; opacity: 1; visibility:visible;}
99% { left:100%; opacity: 0; visibility:hidden;}
100% { left:-100px; opacity: 0; visibility:hidden;}
}
</style>
Related
Im trying to create a blink effect by using 2 images.
I have 2 photos with a person, one with eyes opened and another with eyes closed. How can i make a blinking effect?
I was hoping to make it as real as possible, trying to blink quickly and then keep the eyes opened for 3-5sec and then blink in 1sec.
Found one example that is almost what i need but not quite yet
Would really appreciate some help
.imageswap {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
.imageswap img {
position:absolute;
left:0;
top: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
object-fit: contain;
width: 100%;
height: 100%;
}
#-webkit-keyframes blink {
0% {
opacity: 1;
}
49% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-moz-keyframes blink {
0% {
opacity: 1;
}
49% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-o-keyframes blink {
0% {
opacity: 1;
}
49% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
img.openeyeimg {
-webkit-animation: blink 5s;
-webkit-animation-iteration-count: infinite;
-moz-animation: blink 5s;
-moz-animation-iteration-count: infinite;
-o-animation: blink 5s;
-o-animation-iteration-count: infinite;
}
<div class="imageswap">
<!-- NOTE: both images should be have same dimension, look&feel -->
<img src="https://i.stack.imgur.com/yqWK7.jpg" class="closeeyeimg">
<img src="https://i.stack.imgur.com/NgW24.jpg" class="openeyeimg">
</div>
I'm using css to make an image appear after a certain delay time. I want to make it disappear after another delay time. I have the appear part working, but once I add the disappear part, neither of them work. Can someone tell me what I'm doing wrong, please?
html:
<img class="anim-object anim-smallcar bluebag" src="img/bluebag.gif" />
css:
.bluebag {
position: absolute;
bottom: 160px;
left: 42.25%;
opacity: 0;
animation-name: opacityOn;
animation-duration: 100ms;
animation-delay: 13.7s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-name: opacityOff;
animation-duration: 100ms;
animation-delay: 17.7s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
#keyframes opacityOn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes opacityOff {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
You can add more CSS animation iterations while changing the value of your opacity on the #keyframes the 0% to 25% to 50% to 75% and finally 100%
.bluebag {
opacity: 0;
background: blue;
height: 100px;
width: 100px;
animation: opacityOn 5s normal forwards;
animation-delay: 2s;
}
#keyframes opacityOn {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
50% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="anim-object anim-smallcar bluebag" src="img/bluebag.gif">aa</div>
The only change I would make to Alexandre's code is to make the opacity keyframe all one thing like this:
#keyframes opacityOnAndOff {
0% {
opacity: 0;
}
50%{
opacity: 1;
}
100% {
opacity: 0;
}
}
Depending on how long you want to spend on going to full opacity and then clearing out, you can change the percentages, so if you want a longer closing, you could change the code above to something like
#keyframes opacityOn {
0% {
opacity: 0;
}
30%{
opacity: 1;
}
100% {
opacity: 0;
}
}
Something like that ?
.bluebag {
opacity: 0;
background: blue;
height: 100px;
width: 100px;
animation: opacityOn 1s normal forwards step-end;
animation-delay: 2s;
}
#keyframes opacityOn {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="anim-object anim-smallcar bluebag" src="img/bluebag.gif">aa</div>
CSS is not an iterative language. When you write that:
animation-name: opacityOn;
animation-duration: 100ms;
animation-delay: 13.7s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-name: opacityOff;
animation-duration: 100ms;
animation-delay: 17.7s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
your second section override the first one.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have got an crossfading animation to show 3 steps of content. How could I make it so that it ends after the third one? so no more crossfading.
CodePen link
I divided it into nth-child(),
Here's my CSS code:
.animation {
-moz-animation: imageAnimation 30s linear 0s;
-ms-animation: imageAnimation 30s linear 0s;
-o-animation: imageAnimation 30s linear 0s;
-webkit-animation: imageAnimation 30s linear 0s;
-webkit-backface-visibility: hidden;
animation: imageAnimation 30s linear 0s;
color: black;
height: 100%;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
width: 100%;
z-index: 0;
}
.animation:nth-child(2) {
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
-o-animation-delay: 6s;
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
.animation:nth-child(3) {
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
-o-animation-delay: 12s;
-webkit-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;
}
}
#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;
}
}
HTML
<div class="box">
<div class="animation">
<h4>Hello-1</h4>
</div>
<div class="animation">
<h4>Hello-2</h4>
</div>
<div class="animation">
<h4>Hello-3</h4>
</div>
</div>
If you by "to end" mean that the 3rd child does not dissapear, you need to declare new animation #keyframes declaration that you use for that 3rd child, so it does not end (100%) with opacity:0.
EDIT:
This is how the new keyframes definition could look like:
#keyframes imageAnimationStop {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
animation-timing-function: ease-out;
}
100% {
opacity: 1
}
}
This says that the end state (100%) should have opacity: 1 so it remains visible. I also forked your codepen. This new keyframe is not browser prefixed but I guess you can do that much :). Then you just need to use this new heyframes definition for your 3rd child demo
I have a background animation transition. it works on chrome, but not on chrome mobile. may i know which part is wrong? thanks.
.slideshow,
.slideshow:after {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.slideshow li{
list-style: none;
}
.slideshow li span {
overflow: hidden;
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;
animation: imageAnimation 32s linear infinite 0s;
-moz-animation: imageAnimation 32s linear infinite 0s;
-webkit-animation: imageAnimation 32s linear infinite 0s;
}
.slideshow li:nth-child(1) span {
background-image: url(../img/sbg.jpg);
}
.slideshow li:nth-child(2) span {
background-image: url(../img/sbg2.jpg);
animation-delay: 8s;
-moz-animation-delay: 8s;
-webkit-animation-delay: 8s;
}
.slideshow li:nth-child(3) span {
background-image: url(../img/sbg3.jpg);
animation-delay: 16s;
-moz-animation-delay: 16s;
-webkit-animation-delay: 16s;
}
.slideshow li:nth-child(4) span {
background-image: url(../img/sbg4.jpg);
animation-delay: 24s;
-moz-animation-delay: 24s;
-webkit-animation-delay: 24s;
}
#keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in;}
8% { opacity: 1; animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; }
17% { opacity: 1; }
25% { opacity: 0; }
100% { opacity: 0 }
}
Have you tried inclduing webkit?
#-webkit-keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in;}
8% { opacity: 1; animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; }
17% { opacity: 1; }
25% { opacity: 0; }
100% { opacity: 0 }
}
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/
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.
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;
}