transform: translate effect to mimic 'inccorect input or access denied'

dabblet.css

/**
  * transform: translate effect to mimic 'inccorect input or access denied' 
  **/

.demo{
	position: relative;
	margin: 50px 100px;
	width:400px;
	height: 100px;
	background-color: steelblue;
	display: block;
	-webkit-animation: myAnimation .10s ease-in-out 5 alternate;
}

@-webkit-keyframes myAnimation{
	from { transform: translate(0,0) }
	to { transform: translate(100px,0) }
}

dabblet.html

<div class="demo">
	<input type='text' value='Username' /><br/>
	<input type='text' value='Password' /><br/>
	<input type='submit' value='submit' />
</div>

settings.json

{"view":"separate","fontsize":"60","seethrough":"","prefixfree":"1","page":"all"}