1

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>    
1
  • Deseas que el div hijo se mueva hasta el 50% del contenedor padre ? Commented el 19 ene. 2020 a las 16:42

1 respuesta 1

1

Estuve observando tu codigo un momento , y me di cuenta que tu error no esta tanto en el codigo , todo esta relativamente bien , pero no tuviste en cuenta un detalle minimo , y es que como tu caja hija tiene un ancho de 50px , no se vera que realmente esta centrada debido a que tiene un ancho que sobrepasa esa mitad del contenedor padre , lo que hice fue restar en el @keyframe ,en el left establecido en 50% , lo configure como 50%- ancho de caja , de esta manera , la caja realmente si esta centrada , adicional a esto le di una posicion relativa al padre, y absoluta al hijo ,considerando que es la mejor manera de hacer las cosas en este caso ,pero tu eres libre de elegir tu forma , podrás observar, te dejo el codigo anexo modificado , si tienes alguna duda , no dudes dejarla en los comentarios , suerte :)

.contenedor{
   position:relative; width: 400px;
   height: 400px;
   background: #CCC;}
.hijo{
   position:absolute ; width: 50px;
   height:50px;background:navy;
   animation-name: desliz;
   animation-duration: 2s;
   }
   @keyframes desliz {
    from{left:0%;}to{left:43.6%;}
   }
   @-webkit-keyframes desliz {
    from{left:0%;}to{left:43.6;}
    }
<div class="contenedor">
        <div class="hijo"></div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.