Can you please take a look at this Demo and let me know why the keyframe animation not working>
<div class="showbox"></div>
<style>
.showbox {
height:15px;
width:15px;
background:red;
border-radius: 25px;
-webkit-transition:1s ease-in-out;
-moz-transition:1s ease-in-out;
-o-transition:1s ease-in-out;
transition:1s ease-in-out -webkit-animation-name: pulse;
-webkit-animation-duration: 1000ms;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes pulse {
0% {
-webkit-transform:scale(1);
transform:scale(1);
}
25% {
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
50% {
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
75% {
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
100% {
-webkit-transform:scale(1);
transform:scale(1);
}
}
</style>
Thanks
Simplest variant http://jsfiddle.net/darLuges/2/
.showbox {
height:15px;
width:15px;
background:red;
border-radius: 25px;
transform-origin:50% 50%;
transform:scale(1);
animation: pulse 0.6s infinite linear alternate;
}
#keyframes pulse {
to {transform:scale(1.3);}
}
<div class="showbox"></div>
(than add back the xBrowser -vendor- prefixes)
Related
I want to have a css only animation that fades in and out until hovered when displayed full. I can do both things seperately but not together. The hover element never works. Tried several combinations but here's the 2 seperate parts working:
#keyframes flickerAnimation {
0% { opacity:0.4; }
50% { opacity:0; }
100% { opacity:0.4; }
}
#-o-keyframes flickerAnimation{
0% { opacity:0.4; }
50% { opacity:0; }
100% { opacity:0.4; }
}
#-moz-keyframes flickerAnimation{
0% { opacity:0.4; }
50% { opacity:0; }
100% { opacity:0.4; }
}
#-webkit-keyframes flickerAnimation{
0% { opacity:0.4; }
50% { opacity:0; }
100% { opacity:0.4; }
}
.animate-flicker {
-webkit-animation: flickerAnimation 2s infinite;
-moz-animation: flickerAnimation 2s infinite;
-o-animation: flickerAnimation 2s infinite;
animation: flickerAnimation 2s infinite;
}
/* CSS for hover */
.animate {
opacity: 0.1;
transition: opacity 0.2s ease-in-out;
}
.animate:hover {
opacity: 1.0;
transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
}
#box {
width: 100px;
height: 100px;
background-color: #000;
}
<div id="box" class="animate-flicker animate">
As I commented above you cannot do such thing. As you can read in the spec:
As defined in [CSS3CASCADE], animations override all normal rules
So an idea is to unset the animation on hover:
#keyframes flickerAnimation {
0% { opacity:0.4; }
50% { opacity:0; }
100% { opacity:0.4; }
}
.animate-flicker {
animation: flickerAnimation 2s infinite;
}
/* CSS for hover */
.animate {
height:100px;
background:red;
opacity: 0.1;
transition: opacity 0.2s ease-in-out;
}
.animate:hover {
opacity: 1;
transition: opacity 0.2s ease-in-out;
animation:unset;
}
<div class="animate animate-flicker">
</div>
I have a simple CSS based loading animation that should iterate with infinite. However, the animation only runs once and stops. I'm surely missing something trivial but can't spot the error.
A related question, to shorten the CSS, can I join all the vendor specific selectors into one block, as in the following example?
#keyframes loading-dots,
#-webkit-keyframes loading-dots,
#-[other vendors...]
{
0%,
100% {
visibility: hidden;
}
50% {
visibility: visible;
}
}
Any help is greatly appreciated.
Here is a snippet:
.loading-dots span {
display: inline-block;
height: 9px;
width: 9px;
background: #abb3b8;
-webkit-animation: loading-dots 0.8s infinite;
-moz-animation: loading-dots 0.8s infinite;
-ms-animation: loading-dots 0.8s infinite;
animation: loading-dots 0.8s infinite;
}
.loading-dots span:nth-child(2) {
visibility: hidden;
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-ms-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loading-dots span:nth-child(3) {
visibility: hidden;
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-ms-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#keyframes loading-dots {
0%,
100% {
visibility: hidden;
}
50% {
visibility: visible;
}
}
#-webkit-keyframes loading-dots {
0%,
100% {
visibility: hidden;
}
50% {
visibility: visible;
}
}
#-moz-keyframes loading-dots {
0%,
100% {
visibility: hidden;
}
50% {
visibility: visible;
}
}
#-ms-keyframes loading-dots {
0%,
100% {
visibility: hidden;
}
50% {
visibility: visible;
}
}
<div class="loading-dots">
<span></span>
<span></span>
<span></span>
</div>
I suggest using opacity with any visibility animation check the code below with opacity .. because animating visibility or display is not a good idea as they are a 1/0 values that can't be animated
.loading-dots span {
display: inline-block;
opacity:0;
height: 9px;
width: 9px;
background: #abb3b8;
-webkit-animation: loading-dots 0.8s infinite;
-moz-animation: loading-dots 0.8s infinite;
-ms-animation: loading-dots 0.8s infinite;
animation: loading-dots 0.8s infinite;
}
.loading-dots span:nth-child(2) {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-ms-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loading-dots span:nth-child(3) {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-ms-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#keyframes loading-dots {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes loading-dots {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes loading-dots {
0%{
opacity:0;
}
100% {
opacity:1;
}
}
#-ms-keyframes loading-dots {
0% {
opacity:0;
},
100% {
opacity:1;
}
}
<div class="loading-dots">
<span></span>
<span></span>
<span></span>
</div>
I can make an element with an opacity of zero fade in by changing its class to .elementToFadeInAndOut with the following css:
.elementToFadeInAndOut {
opacity: 1;
transition: opacity 2s linear;
}
Is there a way I can make the element fade out after it fades in by editing css for this same class?
Use css #keyframes
.elementToFadeInAndOut {
opacity: 1;
animation: fade 2s linear;
}
#keyframes fade {
0%,100% { opacity: 0 }
50% { opacity: 1 }
}
here is a DEMO
.elementToFadeInAndOut {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
}
#-webkit-keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
#keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
<div class=elementToFadeInAndOut></div>
Reading: Using CSS animations
You can clean the code by doing this:
.elementToFadeInAndOut {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
opacity: 0;
}
#-webkit-keyframes fadeinout {
50% { opacity: 1; }
}
#keyframes fadeinout {
50% { opacity: 1; }
}
<div class=elementToFadeInAndOut></div>
If you need a single fadeIn/Out without an explicit user action (like a mouseover/mouseout) you may use a CSS3 animation: http://codepen.io/anon/pen/bdEpwW
.elementToFadeInAndOut {
animation: fadeInOut 4s linear 1 forwards;
}
#keyframes fadeInOut {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
By setting animation-fill-mode: forwards the animation will retain its last keyframe
By setting animation-iteration-count: 1 the animation will run just once (change this value if you need to repeat the effect more than once)
I found this link to be useful: css-tricks fade-in fade-out css.
Here's a summary of the csstricks post:
CSS classes:
.m-fadeOut {
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 300ms, opacity 300ms;
}
.m-fadeIn {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 0s, opacity 300ms;
}
In React:
toggle(){
if(true condition){
this.setState({toggleClass: "m-fadeIn"});
}else{
this.setState({toggleClass: "m-fadeOut"});
}
}
render(){
return (<div className={this.state.toggleClass}>Element to be toggled</div>)
}
Try creating a keyframes animation for the opacity attribute of your element:
<style>
p {
animation-name: example;
animation-duration: 2s;
}
#keyframes example {
from {opacity: 2;}
to {opacity: 0;}
}
</style>
<div>
<p>[Element to fade]</p>
</div>
(You can also set the exact percentages of animations to make it fade in/out. For example, set 0% to 2 opacity, 50% to 0 opacity, and 100% to 2 opacity. A good source for this method is W3Schools # https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation2 .)
Try this:
#keyframes animationName {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
#-o-keyframes animationName{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
#-moz-keyframes animationName{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
#-webkit-keyframes animationName{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
.elementToFadeInAndOut {
-webkit-animation: animationName 5s infinite;
-moz-animation: animationName 5s infinite;
-o-animation: animationName 5s infinite;
animation: animationName 5s infinite;
}
Please refer to this fiddle: http://jsfiddle.net/eQegA/3/
<div class="spinner"></div>
.spinner {
width: 100px;
height: 100px;
border: 50px solid blue;
/*border-top-color: #fff;
border-bottom-color: #fff;*/ /* commented out to see the wobble better */
border-radius: 200px;
-webkit-animation: application-loading-rotate 1s;
animation: application-loading-rotate 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes application-loading-rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes application-loading-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
In Google Chrome the rotation is stable, however for some reason in IE11 there is a noticable "wobble" of the circle as it rotates.
Any ideas why it wobbles so? Is there any way to fix it in IE11?
For what it's worth, it also occurs on other browsers. It has to do, how the border is drawn, it's not a perfect round. As far as I know, there isn't a quick fix for this. However you can draw the border as a background image.
.spinner {
display:block;
width: 200px;
height: 200px;
border-radius: 100%;
background-image:url(http://www.clipartbest.com/cliparts/9iR/RyK/9iRRyKLie.png);
background-size:100%;
-webkit-animation: application-loading-rotate 1s;
animation: application-loading-rotate 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes application-loading-rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes application-loading-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
See:
http://jsfiddle.net/eQegA/26/
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;
}