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>