Skip to main content
2 de 4
se añadieron 1325 caracteres en el cuerpo
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>

rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81