Como reproduzir várias animações CSS ao mesmo tempo?

Este artigo demonstra uma demonstração prática para reproduzir/adicionar várias animações CSS ao mesmo tempo.

Como reproduzir várias animações CSS ao mesmo tempo?

Ao aplicar várias animações CSS ao mesmo tempo, os desenvolvedores podem criar facilmente interfaces mais atraentes. Para reproduzir várias animações CSS ao mesmo tempo, dê a cada uma um nome exclusivo e aplique esses nomes ao mesmo ou a componentes separados na página.

Siga o procedimento abaixo para reproduzir/adicionar mais de uma animação ao mesmo tempo.

Passo 1: Criação da Estrutura

Primeiro, crie um elemento HTML no qual as animações serão aplicadas nas próximas etapas. Por exemplo, a imagem será inserida:

No trecho de código acima:

• Primeiro, o caminho da imagem é definido como “ origem ” atributo.
• Em seguida, o valor de “ 100px ” é fornecido para as propriedades CSS “width” e “height”.
• Além disso, defina o valor de “ animar ' para o ' aula ” atributo.

Passo 2: Configurando Animações

O ' quadros-chave ” são utilizados para criar animações personalizadas de acordo com a necessidade da página da web. Por exemplo, duas animações são criadas no trecho de código abaixo:

No trecho de código acima:

• Primeiro, o “ @-webkit-keyframes ” mecanismo está sendo utilizado para configurar “ rodar ' e ' girar ” animações nomeadas.
• Em seguida, utilize o “ transformar ” propriedade que tem um valor de “ girar () ' no ' rodar ”corpo de animação. Esta função gira o elemento em um ângulo de “ 180 graus ”.
• Depois disso, defina a animação que cresce ou estende o elemento original por um fator de “ 1 ” em ambos os “ x ' e ' E ” eixo no “ escala ”corpo de animação.

Passo 3: Aplicando Animação em Elementos HTML

Dentro da parte CSS, selecione a classe “ animar ” que é atribuído ao “ ” e forneça as seguintes propriedades CSS:

Descrição das propriedades usadas no bloco de código acima:

• Primeiro, defina o valor de “ absoluto ” para o CSS “ posição ' propriedade. Ele alinha o “ img ” elemento de acordo com a animação.
• Em seguida, forneça os valores de “ 60% ”, “ 110px ' e ' 110 px ” para o CSS “ esquerda ”, “ largura ' e ' altura ” propriedades. Essas propriedades são utilizadas para definir a posição e o tamanho de um elemento.
• Depois disso, defina o valor de “ escala 3s infinito linear ' para o ' -webkit-animation ” propriedade CSS.
• E a ' 3s ” é a duração dessa animação, o “ infinito ” é a duração da animação e o “ linear ” é a direção da animação.
• No final, forneça os valores de “ girar 2s linear infinito ” para o CSS “ -webkit-animation ' propriedade. Esta propriedade adiciona a segunda animação chamada “ rodar ' no ' img ' elemento.

Após a compilação do bloco de código acima, a animação fica assim:

O gif acima ilustra que apenas “ rodar ”A animação está sendo reproduzida no elemento de destino.

Etapa 4: reproduzindo várias animações em elementos HTML

Como na etapa anterior, apenas uma animação foi aplicada ao elemento. Isso ocorre porque vários valores foram atribuídos ao mesmo “ -webkit-animation ' propriedade.

Para resolver esse problema, envolva o elemento de destino com outro elemento HTML. Enquanto o ' div ” já é usado como wrapper na primeira etapa, selecione seu “ período ” e atualize o código como:

No código acima:

• A princípio, o “ animar ” permanece a mesma e apenas a segunda animação é removida dela, que é colocada no “ período ' aula.
• Depois disso, defina a posição utilizando o botão “ posição ' e ' principal ” propriedades.

Após a execução do trecho de código acima, a página da Web agora aparece assim:

A saída mostra que ambas as animações foram aplicadas ao elemento HTML selecionado ao mesmo tempo.

Conclusão

Para aplicar várias propriedades CSS, envolva o elemento com elementos HTML e aplique animações a eles para que cada elemento HTML contenha uma única animação. Como a propriedade filho herda a animação aplicada no elemento HTML pai, várias animações são aplicadas sem causar erros ou ambiguidade para o compilador. Esse é o procedimento para reproduzir/adicionar mais de uma animação CSS ao mesmo tempo.