Skip to main content
se añadieron 118 caracteres en el cuerpo
Origen Enlace
rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81
@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);
  }
}
@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);
  }
}
@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);
  }
}
se añadieron 1750 caracteres en el cuerpo
Origen Enlace
rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81

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

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.

Defines ambas animaciones separadas por coma.

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

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.

se añadieron 1325 caracteres en el cuerpo
Origen Enlace
rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81

Defines ambas animaciones 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>

Defines ambas animaciones separadas por coma.

animation: rotacion 1s, mymove2 3s;

Defines ambas animaciones 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>

Origen Enlace
rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81
Loading