how to use -webkit-transform: translateX using % and position absolute - html

Question

Hi guys a while back i posted a question regarding a banner i was making, well i have the animation working now but i cant get -webkit-transform: translateX(-40%) to work when i combine it with position:absolute.
The problem is i have 3 images and 3 bits of text that i need to fly onto the screen one after the other and end up overlapping which is why i was trying to use position:absolute but i cant get -webkit-transform: translateX(-40%) to work when i do this however i can get -webkit-transform: translateX(-40px) to work but that doesn't help me as i want it to be the same on different screen sizes. Does anybody know how i can get my animation to work with -webkit-transform: translateX(-40%) and have multiple images overlapping?
Example Code:
Html:
<div class="text3" id="txt3">
Moving Text
</div>
Css:
#txt3{
position:absolute;
top: 150px;
z-index: 1;
}
.text3 {
-webkit-animation-duration: 15s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 15s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
-o-animation-duration: 15s;
-o-animation-iteration-count: 1;
-o-animation-timing-function: ease;
-o-animation-fill-mode: both;
animation-duration: 15s;
animation-iteration-count: 1;
animation-timing-function: ease;
animation-fill-mode: both;}
#-webkit-keyframes text3 {
0% {
-webkit-transform: translateX(-40%)
;opacity: 1;
}
3% {
-webkit-transform: translateX(-40%)
}
30% {
-webkit-transform: translateX(20%)
}
37% {
-webkit-transform: translateX(20%)
;opacity: 1;
}
50% {
-webkit-transform: translateX(35%)
;opacity: 0;
}
100% {
opacity: 0;
-webkit-transform: translateX(35%)
}
}
#-moz-keyframes text3 {
0% {
-moz-transform: translateX(-40%)
;opacity: 1;
}
3% {
-moz-transform: translateX(-40%)
}
30% {
-moz-transform: translateX(20%)
}
37% {
-moz-transform: translateX(20%)
;opacity: 1;
}
50% {
-moz-transform: translateX(35%)
;opacity: 0;
}
100% {
opacity: 0;
-moz-transform: translateX(35%)
}
}
#-o-keyframes text3 {
0% {
-o-transform: translateX(-40%)
;opacity: 1;
}
3% {
-o-transform: translateX(-40%)
}
30% {
-o-transform: translateX(20%)
}
37% {
-o-transform: translateX(20%)
;opacity: 1;
}
50% {
-o-transform: translateX(35%)
;opacity: 0;
}
100% {
opacity: 0;
-o-transform: translateX(35%)
}
}
#keyframes text3 {
0% {
transform: translateX(-40%)
;opacity: 1;
}
3% {
transform: translateX(-40%)
}
30% {
transform: translateX(20%)
}
37% {
transform: translateX(20%)
;opacity: 1;
}
50% {
transform: translateX(35%)
;opacity: 0;
}
100% {
opacity: 0;
transform: translateX(35%)
}
}
.text3 {
-webkit-animation-name: text3;
-moz-animation-name: text3;
-o-animation-name: text3;
animation-name: text3;
}
Here are some working example of the animation:
-webkit-transform: translateX(-40%)
position:absolute
Any Help would be greatly appreciated.
crackruckles