How to assign two CSS3 animations to the same element

Question:

I am trying to make an animation of a div that the first 2 seconds appears and is positioned in the center of the page and once this animation is finished, it executes a second animation that consists of rotating this div 360 degrees infinitely.

The problem I have is that I cannot find or know how to define two types of Animations in the same element (or that one is activated when the first one is finished).

.bloqueAlargado {
   width: 100px;
   height: 400px;
   background-color: blue; 
   font-weight: bold;
   position: relative;
   -webkit-animation-name: mymove2 2s; /*Animacion 1*/
   animation-name: mymove2 ;
   animation-duration: 2s;
   left : 36em;
   animation-name: rotacion;  /*Animacion 2*/
   animation-duration: 4s;
   animation-iteration-count: 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 type="text/css" href="main.css">
    <title>TRANSICIONES</title>

</head>
<body>
    <h1 class ="AnimacionBasica">Animacion Basica</h1>

    <div class="bloqueAlargado"></div>
</body>
</html>

Answer:

If you want both animations to run simultaneously, you must declare them separated by commas.

animation: rotacion 1s, mymove2 3s;

Example:

.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 type="text/css" href="main.css">
  <title>TRANSICIONES</title>

</head>

<body>
  <h1 class="AnimacionBasica">Animacion Basica</h1>

  <div class="bloqueAlargado"></div>
</body>

</html>

Then if you want to load them in sequence, it is more complicated. You must coordinate the keyframes so that they occupy the correct time: Where you give half the total time to one of the animations and the other half to the other using percentages.

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

Example:

.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 type="text/css" href="main.css">
  <title>TRANSICIONES</title>

</head>

<body>
  <h1 class="AnimacionBasica">Animacion Basica</h1>

  <div class="bloqueAlargado"></div>
</body>

</html>

EDITION:

… or that one is activated when the first one is over

As for that, to activate one when the other finishes, javascript is required. If you don't want to use it, check out the solution above that uses coordinated keyframes.

Scroll to Top