Css animation not workign if ff & ie & positioning

Hello all.
I am trying to position four images, each containing a transparent image overlapping each other and animated so they go back & forth across the screen.
It works in chorme w/the exception of the positioning. it doesn’t work in ie or ff.
Hoping i am missing something really simple & you can point out my error.
in the php i have:



        <div id="xparency" class="xparency">
	   <img id="xp1" class="xp1" src="<?php echo get_stylesheet_directory_uri();?>/imgs/xparency1.png" alt="glide">
	   <img id="xp2" class="xp2" src="<?php echo get_stylesheet_directory_uri();?>/imgs/xparency2.png" alt="glide">
	   <img id="xp3" class="xp3" src="<?php echo get_stylesheet_directory_uri();?>/imgs/xparency3.png" alt="glide">
	   <img id="xp4" class="xp4" src="<?php echo get_stylesheet_directory_uri();?>/imgs/xparency4.png" alt="glide">
	</div> <!-- xparency -->

in the css i have:


.xparency{
background:url(imgs/SlotBGround.png);
width:100%;
height:8px;
padding:0px;
margin:0px;
position:relative;
overflow:hidden;
}


.xp1{
display:block;
position:absolute;
left:0px;
top:0px;
padding:0px;
margin:0px;
opacity:.3;
-webkit-animation-name:glide;
-moz-animation-name:glide;
-o-animation-name:glide;
animation-name:glide;

-webkit-animation-duration:9s;
-moz-animation-duration:9s;
-o-animation-duration:9s;
animation-duration:9s;

-webkit-animation-timing-function:ease-in;
-moz-animation-timing-function:ease-in;
-o-animation-timing-function:ease-in;
animation-timing-function:ease-in;

-webkit-animation-iteration-count:infinite;  /* numerical to infinite for a loop  */
-moz-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
animation-iteration-count:infinite;

-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;

-webkit-animation-direction:alternate-reverse;
-moz-animation-direction:alternate-reverse;
-o-animation-direction:alternate-reverse;
animation-direction:alternate-reverse;
}



.xp2{
display:block;
position:absolute;
left:0;
top:0px;
padding:0px;
margin:0px;
opacity:.3;
-webkit-animation-name:glide;
-moz-animation-name:glide;
-o-animation-name:glide;
animation-name:glide;

-webkit-animation-duration:10s;
-moz-animation-duration:10s;
-o-animation-duration:10s;
animation-duration:10s;

-webkit-animation-timing-function:ease-in;
-moz-animation-timing-function:ease-in;
-o-animation-timing-function:ease-in;
animation-timing-function:ease-in;

-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
animation-iteration-count:infinite;
}

.xp3{
display:block;
position:relative;
left:-10px;
top:0px;
padding:0px;
margin:0px;
opacity:.3;
-webkit-animation-name:glide;
-moz-animation-name:glide;
-o-animation-name:glide;
animation-name:glide;

-webkit-animation-duration:15s;
-moz-animation-duration:15s;
-o-animation-duration:15s;
animation-duration:15s;

-webkit-animation-timing-function:ease-in-out;
-moz-animation-timing-function:ease-in-out;
-o-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out;

-webkit-animation-iteration-count:infinite;  /* numerical to infinite for a loop  */
-moz-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
animation-iteration-count:infinite;

-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;

-webkit-animation-direction:alternate-reverse;
-moz-animation-direction:alternate-reverse;
-o-animation-direction:alternate-reverse;
animation-direction:alternate-reverse;
}

.xp4{
display:block;
position:relative;
left:-20px;
padding:0px;
margin:0px;
opacity:.3;
-webkit-animation-name:glide;
-moz-animation-name:glide;
-o-animation-name:glide;
animation-name:glide;

-webkit-animation-duration:3s;
-moz-animation-duration:3s;
-o-animation-duration:3s;
animation-duration:3s;

-webkit-animation-timing-function:ease-in;
-moz-animation-timing-function:ease-in;
-o-animation-timing-function:ease-in;
animation-timing-function:ease-in;

-webkit-animation-iteration-count:infinite;  
-moz-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
animation-iteration-count:infinite;

-webkit-animation-fill-mode:alternate;
-moz-animation-fill-mode:alternate;
-o-animation-fill-mode:alternate;
animation-fill-mode:alternate;
}

@-webkit-keyframes glide{
from{-webkit-transform: translateX(0px);}
to{-webkit-transform: translateX(900px);}
}
@-moz-keyframes glide{
from{-webkit-transform: translateX(0px);}
to{-webkit-transform: translateX(900px);}
}
@-o-keyframes glide{
from{-webkit-transform: translateX(0px);}
to{-webkit-transform: translateX(900px);}
}
@-keyframes glide{
from{-webkit-transform: translateX(0px);}
to{-webkit-transform: translateX(900px);}
}


ps i was planning on using the shorthand for some of this but have not gotten to it yet.
thank you
d

HI,

Your keyframes are all wrong., They should be like this:)


@-webkit-keyframes glide{
from{-webkit-transform: translateX(0px);}
to{-webkit-transform: translateX(900px);}
}
@-moz-keyframes glide{
from{-moz-transform: translateX(0px);}
to{-moz-transform: translateX(900px);}
}
@-o-keyframes glide{
from{-o-transform: translateX(0px);}
to{-o-transform: translateX(900px);}
}
@keyframes glide{
from{transform: translateX(0px);}
to{transform: translateX(900px);}
}

@keyframes not @-keyframes.

And you used -webkit- in all the other vendor rules.

e.g.


@-moz-keyframes glide{
from[B]{-webkit-[/B]transform: translateX(0px);}
to{[B]-webkit[/B]-transform: translateX(900px);}
}

That should be -moz-transform of course.

d’ho! let’s hope that is my only homer simpson moment of the weekend.
Thank you Paul & i have one more question then I make the container relative and all the images inside absolute so they’d stack on top of each other. but as you can see that doesn’t seem to be working. As i understand it,it should have. What did i do wrong there?
Thx
D

You have xp3 and xp4 as position:relative. Did you mean position:absolute for those?

Also the animation-direction:alternate-reverse will make the animation start from the end I believe so the element will start at the right.

I was testing the relatives and absolutes. but if i was correct in making them absolute and the parent div relative maybe it is a matter of positioning. yep. know about the reverse :slight_smile:
btw the animation is still not kicking in for ie.
but i am using the code you suggested & it is working for all the others


@-webkit-keyframes glide{
from{-webkit-transform: translateX(0px);}
to{-webkit-transform: translateX(1000px);}
}
@-moz-keyframes glide{
from{-moz-transform: translateX(0px);}
to{-moz-transform: translateX(1000px);}
}
@-o-keyframes glide{
from{o-transform: translateX(0px);}
to{o-transform: translateX(1000px);}
}
@-keyframes glide{
from{transform: translateX(0px);}
to{transform: translateX(1000px);}
}

If the parent is relative then the absolute child will be placed in respect to that parent which is what is happening in your page.

btw the animation is still not kicking in for ie.

It’s working for me in IE11 and IE10 should also work but IE9 doesn’t do keyframes.

will test some more. but am looking at this on ie11.
so for ie would my best option be to also use a javascript/jquery solution?
thx
D

It’s working in my ie11. I assume you have a doctype on the real page?

so for ie would my best option be to also use a javascript/jquery solution?
thx
D

It depends on whether you are bothered about IE9 users or not.

If its just decoration then I wouldn’t bother otherwise you would need a js solution (or jquery as you mentioned),

yep on the doctype.
personally not bothered at all by ie8/9 users but someone else might be.
ok will follow up thank you Paul have a great day.
D

Double check that last keyframe. I think Paul said it should not have a dash after the @ symbol.

yikes. Thank you Ron. score another homer simpson moment for daniela. That did it.
Thank you all & have an awesome weekend!

Thanks Ron, I assumed the re-posted code was my original and didn’t check again :slight_smile: