estoy atascado en una animación sencilla. necesito hacer que el div hijo se detenga en la mitad del contenedor.
.contenedor{width: 400px;height: 400px;background: #CCC;}
.hijo{position:relative;width: 50px;height: 50px;background:navy;}
.hijo{animation-name: desliz;
animation-duration: 2s;
}
@keyframes desliz {
from{left:0%;}to{left:50%;}
}
@-webkit-keyframes desliz {
from{left:0px;}to{left:50%;}
}
Se supone que si le doy la orden que se ubique hasta el 50% del contenedor asi debe ser.
<div class="contenedor">
<div class="hijo"></div>
</div>