How to animate each div for a slide in pure JavaScript using @keyframes?

Question

I am doing a divs animation project to smoothly navigate to the user view page. I notice that the div will stick to the right and move with the help margin-left:-700pxthat I set, but did not move the entire div from left to right.

function show(elem) 
{
    elem = getElem(elem);
    if (elem) 
    {
        elem.style.display = "block";

        var cssAnimation = document.createElement('style'); //responsible for creating animation with <style> element
        cssAnimation.innerHTML = "@keyframes pulseOnce { 0% {margin-left: -700px;} 50%{margin-left: 10px;} 75%{background-color:black;color:white;} 100%{background-color:white;color:inherit;} }";
        cssAnimation.innerHTML += "@-webkit-keyframes pulseOnce { 0% {margin-left: -700px;} 50%{margin-left: 10px;} 75%{background-color:black;color:white;} 100%{background-color:white;color:inherit;} }";
        document.head.appendChild(cssAnimation);
        elem.style.animation = "pulseOnce 1.5s 1";
        elem.style.webkitAnimation = "pulseOnce 1.5s 1";
    }
    return elem;
}

In addition, immediately after choosing a budget option, budgetFormit will simultaneously move both budgetForm, and brandFormthat I do not want, and the rest after that is compatible and does not experience any problems, This happens in show(elem) function. How to prevent simultaneous animation?

, , , queryBox , , . margin-left:1000px;. , , ?

, Reset All , , , - , , .

- , , , , . . , jQuery!

, , jsfiddle: http://jsfiddle.net/WLAC5/

Answer 1

, , , , webkit , , .

:

http://jsfiddle.net/WLAC5/2/

function show(elem) 
        {
            elem = getElem(elem);
            if (elem) 
            {
                elem.style.display = "block";

                elem.classList.add('pulseIn');

            }
            return elem;
        }

css , :

@-webkit-keyframes pulseOnce { 
            0% {-webkit-transform: translateX(-100%);} 
            50%{-webkit-transform: translateX(0%);} 
            75%{background-color:black;color:white;} 
            100%{background-color:white;color:inherit;} 
        }
        .pulseIn {
            -webkit-animation: pulseOnce .7s ease-in-out both;
        }

, , , , html

<form id="budgetForm" class="pulseIn">
                Select your DSLR budget range:
                <select id="budgetSel" onChange="onChange();">
                    <!--<option value="selectOneBudget"  selected="selected">Select one</option>
                    <option value="fiveHundredDollars">&lt; $500</option>
                    <option value="thousandDollars">&lt; $1000</option>-->
                </select>
            </form>

- , css3 translateX, , . .

!