Estoy intentando hacer una animación de un div
que los primeros 2 segundos aparezca y se posicione en el centro de la pagina y una vez terminado esta animación, que ejecute una segunda animación que consista en rotar este div
360 grados infinitamente.
El problema que tengo es que no encuentro ni se como definir dos tipos de Animaciones en un mismo elemento (o que se accione una cuando la primera se ha terminado).
.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 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>