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 ? 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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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