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.