He probado a hacer la CSS transitions para jugar uno después de otro ,significa que primero se tiene que transformar en el ancho y más tarde altura.

He probado con un par de opciones, pero todo es en vano.He logrado este en el javascript Pero puede que algunos CSSprofesionales ayudan a explorar este y se rompen.Gracias de antemano.

<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s;
    transition: all 2s;
}

div:hover {
    width: 300px;
    height:500px;
}
</style>
InformationsquelleAutor Ankanna | 2016-03-28

3 Comentarios

  1. 11

    Solo uso el transition-delay de la propiedad en el transition taquigrafía para hacer múltiples transiciones en secuencia en una regla CSS.

    -webkit-transition: width 2s, height 2s ease 2s;
    transition: width 2s, height 2s ease 2s;
    • esto es genial me gustaba esta muy corto y creativo
  2. 5

    Puede utilizar Los fotogramas clave para esto.

    /* Standard */
    @keyframes all {
        0%   {width: 100px; height: 100px;}
        50%  {width: 300px; height: 100px;}
        100% {width: 300px; height: 500px;}
    }
    
    /* Chrome, Safari, Opera */
    @-webkit-keyframes all {
        0%   {width: 100px; height: 100px;}
        50%  {width: 300px; height: 100px;}
        100% {width: 300px; height: 500px;}
    }

    Llamada de esta manera:

    div:hover {
        -webkit-animation: all 2s; /* Chrome, Safari, Opera */ 
        animation: all 2s;
        animation-fill-mode: forwards;
    }

    Ver este ejemplo JsFiddle

    Edit: Las otras respuestas publicado antes que yo uso un método mejor que este, ya que puede ser utilizado para invertir la animación cuando el usuario pasa el ratón por encima de la div.

    • Gracias por la respuesta
  3. 3

    Romper el individuo propiedades de transición en valores separados por comas para facilidad de referencia….utilice sólo la transición de retardo a la secuencia de ellos.

    CSS:

    div {
        width: 100px;
        height: 100px;
        background: red;
        transition-property: width, height;
        transition-duration:2s, 4s;
        transition-delay:0s, 2s;
        transition-timing-funtion:linear;
    }
    
    div:hover {
        width: 300px;
        height: 300px;
     }

    HTML:

    <div></div>

    • Gracias por la respuesta perfecta respuesta profesional

Dejar respuesta

Please enter your comment!
Please enter your name here