Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

posso usar mais de um "animation" num mesmo elemento?

estou criando animações, mas não consigo colocar dois animation num mesmo elemento.

ex:

#goku-poder { animation: kameha 2s forwards; animation: surgir-ki 1s infinite; }

como posso fazer isso funcionar? fazer as duas animações em um unico @keyframes a partir de diversas etapas em porcentagem ficou muito complicado pois há coisas que eu quero por um delay diferente. também estou com dificuldade na propriedade "z-index" e os elementos internos do svg. se coloco o "z-index" assim:

svg { position: absolute; z-index: 2 } funciona. mas se tenho um "circle" com um id, o z-index não pega esse id e eu não consigo sobrepor a imagem.

1 resposta
solução!

Fala ai Rodrigo, tudo bem? É possível adicionar N animações para um elemento, elas podem ser separadas por uma virgula , e não ponto e virgula ;.

Tente assim:

#goku-poder {
    animation: kameha 2s forwards, surgir-ki 1s infinite;
}

Do jeito que você fez, estava sobreescrevendo a propriedade animation.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software