Entrar Ainda não tem acesso?
1
resposta

[Dúvida] DUVIDA SOBRE BOAS PRATICAS

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Criando Header, Flexbox e @import e atividade Para saber mais: Flexbox, Position e Medidas

por JULIANO PEREIRA DA ROSA
| 96.2k xp | 188 posts

Boa noite, no index.htm acabei desenvolvendo a animação "gostei" porem gostaria de saber se haveria como criar uma pagina html só para as animações e referenciá-las no index.html

meu projeto

Outra dúvida é: a estrutura de uma animação seria essa abaixo?

#ID:checked + label > svg {
  animation: fill 1s;
  animation-fill-mode: forwards;
}

@keyframes ID{}

Eu posso combinar mais de uma ação nessa mesma estrutura? por exemplo o shake e o fill? gostaria de implementar o shake a cada clique porém só consegui no clique de preencher e o mesmo não executa no vercel. Pesquisei no forum mas a explicação que vi não me ficou muito clara. Muito Obrigado desde já.

1 resposta
por Victor Costa Santos
| 1946.9k xp | 3757 posts
Alura Scuba Team Monitor de ForumOps

Olá, Juliano!

Você pode, sim, criar o seu projeto de forma mais organizada, mas cuidado para não se confundir e acabar gerando muitos erros em seu projeto, o ideal é colocar a animação no mesmo local onde fica o botão, por exemplo, pois aquela animação pertence ao botão assim como a sua cor, tamanho e outras propriedades

É possível combinar mais de uma animação na mesma estrutura. Você pode adicionar várias animações separando-as por vírgula. Por exemplo:

#ID:checked + label > svg {
  animation: shake 1s, fill 1s;
  animation-fill-mode: forwards;
}

@keyframes shake {}
@keyframes fill {}

Dessa forma, a animação "shake" será executada junto com a animação "fill" quando o elemento for clicado.

Espero ter ajudado, qualquer dúvida, me coloco à disposição! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!