CSS Erro ao ampliar imagem e rotacionar com animation....

[Nolram 0]

Quero que uma imagem no CSS amplie por 1s e depois fique girando infinitamente. É o seguinte, quando está apenas o código:

animation: elipseInteriorI 0.8s forwards;  

ele amplia perfeitamente, mas quando acrescento o código para rotacionar:

animation: rotating 2s linear infinite;

ele não amplia mais, apenas rotaciona.

 

 

 

 

Aqui o CSS da imagem:

div#principal img.luz.elipseInterior{
	height: 1px;
	width: 1px;
    animation: elipseInteriorI 0.8s forwards;
    animation: rotating 2s linear infinite;
    animation-delay: 1.6s;

}

@keyframes elipseInteriorI {
    100% {transform:scale(172);}
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }

(O animation-delay, é porque tem algumas animações com outras imagens, e essa imagem vai "esperar" as animações anteriores realizarem)

Alguém sabe como fazer para imagem ampliar E rotacionar? Espero que consigam me compreender. :joia:

[André do Vale 76]

Tenta:

div#principal img.luz.elipseInterior{
  height: 1px;
  width: 1px;
  animation: elipseInteriorI 0.8s forwards 1.6s, rotating 2s linear infinite 2.4s;
}