Introdução

Hoje vou te contar como fazer animação. Veremos todas as propriedades de animação necessárias neste post. Você pode obter o código no meu github. Então vamos começar!!

Animação

Animação é a propriedade usada para melhorar a aparência do site. Dá uma boa interferência ao usuário e também serve para mostrar às pessoas o objetivo do site.

Uma animação básica

Primeira Animação: Mudando a cor de um quadrado

Square

Aqui eu faço um quadrado de cor azul e depois dou alguns estilos. Você pode escolher qualquer cor!

#square{
    position: relative;
    width: 8rem;
    height: 8rem;
    background-color: rgb(14, 202, 202);
    border-radius: 5px;
    margin: 3rem 0 0 3rem;
    text-align: center;
}

Agora faremos uma animação.

Etapa 1: Faça animação @keyframes

Para fazer uma animação Você precisa definir @keyframes. Ele contém quais estilos você deseja dar ao seu elemento em um determinado momento e então você precisa dar um nome a ele. No meu caso estou mudando a cor do quadrado. Então, dou-lhe um nome de cor. Agora, você pode escrever @keyframes em dois tipos, como

@keyframes color{
    from{
        background-color: rgb(14, 202, 202);
    }
    to{
        background-color: pink;
    }
}

Se você deseja realizar uma animação que possui duas etapas, você pode usar de e para. Ou você pode fazer isso usando um valor percentual como

@keyframes color{
    0%{
        background-color: rgb(14, 202, 202);
    }
    100%{
        background-color: pink;
    }
}

Os valores percentuais são usados ​​quando você precisa realizar várias tarefas na animação, mas você pode usar ambas! Eu costumo usar valor percentual para uma animação

Etapa 2: Defina a propriedade de animação no quadrado.

Agora, vamos animar a propriedade na praça. Você precisa conhecer as propriedades da animação para isso. Vou te contar quais são mais usados:

• animation-name - É usado para informar ao navegador quais @keyframes você deseja usar. No meu caso, meu nome @keyframes é color.

• animation-duration - Serve para informar em quanto tempo a animação deve ser finalizada.

• animation-iteration-count - É usado para dizer quanto tempo deve ser executado.

Você pode aprender mais sobre animação no w3school ou em qualquer outro site. Agora, usaremos a propriedade Animation mas iremos escrevê-la em uma única linha como esta:

    animation: color 4s infinite;

Existem 7 propriedades em animação em CSS. Para usar a propriedade de animação em linha única, primeiro escrevo o nome da animação que é cor, depois a duração da animação que é 4s no meu caso e, em seguida, defino a contagem de iterações da animação como infinita. Se quiser usar a animação apenas uma vez, você pode configurá-la para 1 . Você também pode definir os valores da propriedade de animação por conta própria.

Agora, se você vir seu quadrado, ele mudará de cor continuamente! Agora faremos o quadrado se mover enquanto mudamos a cor.

Segunda Animação: Movendo o quadrado enquanto muda a cor!

Para isso usarei o mesmo quadrado e farei outro @keyframes para isso. Usaremos as mesmas etapas de antes

Etapa 1: Faça animação @keyframes

@keyframes move{
    0%{
        left:0px;
        background-color: rgb(14, 202, 202);
    }50%{
        left: 300px;
        background-color: pink;
    }100%{
        left:0px;
        background-color: rgb(14, 202, 202);
    }
}

Aqui, faço um @keyframes com o nome move e utilizo três passos para essa animação. Primeiro configurei a esquerda para 0px e uma cor de fundo. Depois em 50% configurei left para 300px e mudei a cor de fundo e por fim, configurei novamente left para 0px, para que fique na primeira posição.

Etapa 2: definir a propriedade da animação no quadrado

    animation: move 4s infinite;

Aqui, defino o nome da animação para mover, depois a duração da animação para 4s e a contagem de iterações da animação para infinito. Novamente você pode definir o valor da animação de acordo com sua escolha. E também não se esqueça de comentar a primeira propriedade da animação ou algo pode dar errado!

Conclusão

Como o post já está muito longo vamos continuar em outro post. Por enquanto, é o suficiente por hoje. Eu espero que você entenda. Eu tento o meu melhor para contar tudo sobre animação. E também me diga nos comentários sobre qual tema devo escrever no meu próximo post. Obrigado por ler!