I did part of what you wanted to give you an idea of how you should approach this, at the moment you are creating webkit animations in the head which you dont want to do at all, its better to use a class to indicate a state change and a animation.
Updated fiddle:
function show(elem)
{
elem = getElem(elem);
if (elem)
{
elem.style.display = "block";
elem.classList.add('pulseIn');
}
return elem;
}
In the css, needs more vendor prefixes but you get the idea:
@-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;
}
And finally, to ensure that you dont get two sliding in, add this to the 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">< $500</option>
<option value="thousandDollars">< $1000</option>-->
</select>
</form>
You shouldnt look for margin to that slide stuff in and out, preferably use css3 translateX to move stuff around as it is cheap to animate. Otherwise you can also try postioning with left property.
Goodluck!