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

    animation: rotacion 1s, mymove2 3s;

Ejemplo:

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

    .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);
      }
    }

<!-- language: lang-html -->

    <!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>

<!-- end snippet -->

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% { /* 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);
      }
    }
Ejemplo:

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

    .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);
      }
    }

<!-- language: lang-html -->

    <!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>

<!-- end snippet -->

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.