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.