Starting animation in the center

[toolman]

I have the following code which animated a div slide by side. However, it starts slightly to the right.

.ghost {  
    animation-name: theanimation
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
	background: #D61C59;
	width: 50px;
	height: 50px;
	float:  none;
	left: 0;
	right: 0;
	margin: 20% auto 30px auto;
}



@keyframes theanimation {
    from { transform: translate(0px,  0); }
    50%  { transform: translate(50px, 0); }
    to   { transform: translate(-0px, 0); }    
}

I have it wrapped in a parent div which is centered using

margin: 20% auto 30px auto

Is there a way I can start and keep the animation centered at all times - is this in the animation properties or the parent div?

Thanks!

[Mori]

Is this what you mean:

@keyframes theanimation {
    0% {transform: translateX(0);}
    25% {transform: translateX(50px);}
    50% {transform: translateX(0);}
    75% {transform: translateX(-50px);}
    100% {transform: translateX(0);}   
}