Skip to main content
3 de 4
se añadieron 1750 caracteres en el cuerpo
rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81

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% {
    left: 0em;
  }
  100% {
    left: 36em;
  }
}


@keyframes rotacion {
  0% {
    transform: rotate(0deg);
  }
  50% {
    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.

rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81