Tengo el siguiente codigo:
#cajanumeral {
height: 220px;
margin:1em auto;
text-align: center;
width: 300px;
display: table;
background-color: #0000ff;
}
#cajahijo:hover {
box-shadow: 325px 0 #330000 inset;
color: #fff;
}
#cajahijo{
flex: auto;
-webkit-transition: all 1s;
box-shadow: 10px 0 #330000 inset;
display: table-cell;margin: 0; padding: 0 1em;vertical-align: middle;font-size: 50px;color:#ffff00
}
<div id="cajanumeral" >
<div id="cajahijo">
37
</div>
</div>
Como verán el resultado al final de la transición parpadea de forma horrible, ¿Como hago para que esto no suceda?