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% { left: 0em; } 100% { left: 36em; } } @keyframes rotacion { 0% { transform: rotate(0deg); } 50% { 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.