10

Estoy intentando hacer una animación de un div que los primeros 2 segundos aparezca y se posicione en el centro de la pagina y una vez terminado esta animación, que ejecute una segunda animación que consista en rotar este div 360 grados infinitamente.

El problema que tengo es que no encuentro ni se como definir dos tipos de Animaciones en un mismo elemento (o que se accione una cuando la primera se ha terminado).

.bloqueAlargado {
   width: 100px;
   height: 400px;
   background-color: blue; 
   font-weight: bold;
   position: relative;
   -webkit-animation-name: mymove2 2s; /*Animacion 1*/
   animation-name: mymove2 ;
   animation-duration: 2s;
   left : 36em;
   animation-name: rotacion;  /*Animacion 2*/
   animation-duration: 4s;
   animation-iteration-count: infinite;    
}


    @-webkit-keyframes mymove2 {
            from {left: 0em;}
            to {left: 36em;}
    }

    /* Standard syntax */
    @keyframes mymove2 {
            from {left: 0em;}
            to {left: 36em;}
    }

    /* Safari 4.0 - 8.0 */
    @-webkit-keyframes rotacion {
        0% {
            transform: rotate(0deg);

        }
        100% {
            transform: rotate(-360deg);

        }

    }

    @keyframes rotacion {
        0% {
                transform: rotate(0deg);

        }
        100% {
                transform: rotate(-360deg);

        }
    }
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="main.css">
    <title>TRANSICIONES</title>

</head>
<body>
    <h1 class ="AnimacionBasica">Animacion Basica</h1>

    <div class="bloqueAlargado"></div>
</body>
</html>

1 respuesta 1

10

Si quieres que ambas animaciones se ejecuten en simultaneo, debes declararlas separadas por coma.

animation: rotacion 1s, mymove2 3s;

Ejemplo:

.bloqueAlargado {
  width: 100px;
  height: 400px;
  background-color: blue;
  font-weight: bold;
  position: relative;
  left: 36em;
  animation: rotacion 4s infinite, mymove2 2s infinite;
}
@-webkit-keyframes mymove2 {
  from {
    left: 0em;
  }
  to {
    left: 36em;
  }
}
/* Standard syntax */

@keyframes mymove2 {
  from {
    left: 0em;
  }
  to {
    left: 36em;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes rotacion {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes rotacion {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="main.css">
  <title>TRANSICIONES</title>

</head>

<body>
  <h1 class="AnimacionBasica">Animacion Basica</h1>

  <div class="bloqueAlargado"></div>
</body>

</html>

Luego si quieres cargarlas en secuencia, es mas complicado. Debes coordinar los keyframe para que ocupen el tiempo correcto: Donde das la mitad del tiempo total a una de las animaciones y la otra mitad a la otra usando los porcentajes.

@keyframes mymove2 {
  0% { 
    left: 0em;
  }
  50% { /* el primer 50% del tiempo esta animacion no hace nada */
    left: 0em;
  }
  100% {
    left: 36em;
  }
}


@keyframes rotacion {
  0% {
    transform: rotate(0deg);
  }
  50% { /* el ultimo 50% del tiempo esta animacion no hace nada */
    transform: rotate(-360deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

Ejemplo:

.bloqueAlargado {
  width: 100px;
  height: 400px;
  background-color: blue;
  font-weight: bold;
  position: relative;
  left: 36em;
  animation: rotacion 4s infinite, mymove2 4s infinite;
}

@keyframes mymove2 {
  0% { 
    left: 0em;
  }
  50% {
    left: 0em;
  }
  100% {
    left: 36em;
  }
}


@keyframes rotacion {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-360deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="main.css">
  <title>TRANSICIONES</title>

</head>

<body>
  <h1 class="AnimacionBasica">Animacion Basica</h1>

  <div class="bloqueAlargado"></div>
</body>

</html>

EDICION:

... o que se accione una cuando la primera se ha terminado

En cuanto a eso, para activar una cuando termina la otra se requiere javascript. Si no quieres usarlo, fíjate en la solucion arriba que usa keyframes coordinados.

5
  • Hola! Ahora he editado la pregunta para que incluya un codigo ejecutable. Si lo copias en tu respuesta con la linea de tu solucion, es más visible :D (y puedes cambiar el tamaño del bloque alargado para que no sea tan grande xD)
    – lois6b
    Commented el 18 ene. 2017 a las 15:03
  • Gracias @lois6b, ya edite XP Commented el 18 ene. 2017 a las 15:09
  • Perfecto hehe +1
    – lois6b
    Commented el 18 ene. 2017 a las 15:10
  • Gracias, me ha servido mucho!! Commented el 18 ene. 2017 a las 15:52
  • Genial aclaracion, solo es cuestion de crear solamente un atributo e indicar dos valores (asumiendo que se tienen 2 keyframes) y separarlos por coma, sería algo asi como un par ordenado donde el primero siempre responde al iframe name1, y el segundo valor al iframe name2, genial!! q poderoso es el css!! :D Commented el 25 oct. 2017 a las 3:45

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.