CSS é uma das formas mais poderosas de tornar a página da web interativa. Ele transforma a aparência de nosso básico página da Internet. Um dos recursos importantes e interessantes que o CSS oferece é que nos permite realizar animações. Isso nos permite mover os elementos em nossa página. Vamos começar nossa Jornada de Animações em CSS na seguinte ordem:
Animações em CSS
Adicionar animações ao nosso site é uma ótima maneira de chamar a atenção dos usuários. Isso não apenas agrega valor à nossa página, mas também enriquece a experiência do usuário. A animação em CSS é construída em duas partes. Eles são
- Quadros-chave
- Animação
As animações CSS são suportadas em todos os navegadores. No entanto, alguns navegadores mais antigos, como Safari (até a versão 8.0) requerem prefixo (-webkit-) para interpretar as propriedades da animação. Por exemplo:
.anim {altura: 200px largura: 200px fundo: posição azul claro: raio da borda relativa: 100% -webkit-animation-name: cssanim / * navegadores antigos * / -webkit-animation-duration: 5s / * navegadores antigos * / animation -name: cssanim animation-duration: 5s} / * old browsers * / @ -webkit-keyframes cssanim {0% {left: 0px} 100% {left: 300px}} @keyframes cssanim {0% {left: 0px} 100 % {left: 300px}}Podemos usar a página html de amostra acima e substituir o código CSS na tag de estilo para experimentar outros exemplos.
Quadros-chave em CSS
Este é o bloco de construção de animações em CSS. É usado para definir momentos e estilos específicos de animação em nossa página. Em outras palavras, quando especificamos @keyframes dentro de nosso CSS, ele obtém o controle para modificar o estado atual para um novo estado ou animar os objetos por um determinado período.
Os @keyframes precisam ter certas propriedades para controlar a animação, como o nome da animação, estágios e propriedades.
Nome - É necessário que haja um nome para cada animação para descrever seus comportamentos.
Estágios - O estágio representa a conclusão de uma animação. Isso pode ser feito com as palavras-chave “para” e “de” ou como uma porcentagem, enquanto 0% representa o estado inicial e 100% representa o estado final de uma animação. A vantagem de usar a representação percentual é que podemos definir vários estágios intermediários entre eles, ou seja, qual deve ser o comportamento da animação no estágio de 50% ou 75% etc.
Propriedades - Essas propriedades nos dão controle sobre os @keyframes para manipulá-los durante a animação.
.anim {altura: 200px largura: 200px fundo: posição azul claro: raio da borda relativa: 100% nome da animação: cssanim duração da animação: 5s} @ keyframes cssanim {0% {transformação: escala (0,5) opacidade: 0} 50 % {transformação: escala (1,5) opacidade: 1} 100% {transformação: escala (1)}}Agora, já que estamos claros sobre a definição de quadros-chave. Vamos explorar as propriedades da animação para descrever como animar nossos elementos e objetos. As duas propriedades, ou seja, herdar e inicial, podem ser usadas com todos os tipos de animação. Essas propriedades geralmente são usadas junto com a tag div para exibir diferentes comportamentos.
inicial: Define esta propriedade com seu valor padrão.
o que é hibernar em java
herdar: Herda essa propriedade de seu elemento pai.
Propriedades de animação
- nome da animação
Ele especifica o nome da animação, que é usado em @keyframes para manipular.Os valores possíveis são:
- nome: Isso especifica o nome a ser vinculado ao quadro-chave para animação.
- Nenhum: Este é o valor padrão e pode ser usado para substituir as animações herdadas ou em cascata.
Sintaxe:
animação-nome: nome | nenhum | inicial | herdar
.anim {altura: 200px largura: 200px fundo: posição azul claro: raio da borda relativa: 100% nome da animação: cssanim duração da animação: 5s} @keyframes cssanim {0% {esquerda: 0px} 100% {esquerda: 300px} }- duração da animação
Ele especifica o tempo que leva para uma animação completar uma execução. É definido em segundos ou milissegundos (por exemplo, 4s ou 400ms). O valor padrão desta propriedade é 0s, portanto, se esta propriedade não for especificada, a animação não ocorrerá.
Sintaxe:
animação-duração: tempo
.anim {altura: 200px largura: 200px fundo: posição azul: raio da borda relativa: 100% nome da animação: cssanim duração da animação: 4s} @ keyframes cssanim {0% {transformação: escala (0,4) opacidade: 0} 50 % {transformação: escala (1,4) opacidade: 1} 100% {transformação: escala (1)}}- animação-atraso
A propriedade animation-delay nos permite especificar o atraso na animação. Ele define quando uma sequência de animação começará a ser executada.
O valor desta propriedade pode ser declarado em segundos (s) ou milissegundos (ms). Ele pode conter valores positivos e negativos. Um valor positivo indica que a animação começará após o tempo especificado ter passado e até então permanecerá inanimada. Por outro lado, um valor negativo iniciará imediatamente a animação do ponto, como se já estivesse em execução por um período de tempo especificado.
Sintaxe:
animação-atraso: tempo
.anim {altura: 200px largura: 200px fundo: posição azul claro: raio da borda relativa: 100% nome da animação: cssanim duração da animação: atraso da animação 4s: 4s} @keyframes cssanim {0% {esquerda: 0px} 100% {esquerda: 250px}}- animação-iteração-contagem
Esta propriedade indica o número de vezes que uma sequência de animação deve ser reproduzida. O valor padrão desta propriedade é 1.Os valores possíveis são:
- número - denota o número de iterações
- infinito - indica que a animação deve se repetir para sempre
Sintaxe:
animação-iteração-contagem: número | infinito
.anim {altura: 200px largura: 200px fundo: posição azul claro: raio da borda relativa: 100% nome da animação: cssanim duração da animação: contagem de animação 2s iteração: 4} @keyframes cssanim {0% {esquerda: 0px} 100% {left: 100px}}- direção da animação
Ele define a direção da animação. A direção do elemento pode ser definida para avançar, retroceder ou em ciclos alternados.O valor padrão desta propriedade é normal e ela é zerada a cada ciclo.Os valores possíveis são:
normal - Este é o comportamento padrão e a animação é reproduzida para frente. Depois de cada ciclo a animação chega ao seu estado inicial e é reproduzida para a frente novamente
marcha ré - A animação é reproduzida na direção inversa. Após cada ciclo, a animação chega ao seu estado final e é reproduzida para trás
alternar - A direção da animação é invertida, ou seja, ela é reproduzida primeiro para a frente e depois para trás em cada ciclo. Cada ciclo ímpar renderiza animação para frente e cada ciclo par renderiza movimento para trás.
definindo o caminho da classe em java
alternativo-reverso - A direção da animação é invertida alternadamente. Aqui, a animação é reproduzida primeiro para trás e depois para a frente em cada ciclo. Cada ciclo ímpar se move para trás ou para trás e cada ciclo par renderiza a animação para frente.
Sintaxe:
animação-direção: normal | reverso |alternativo | alternativo-reverso
.anim {altura: 200px largura: 200px fundo: posição azul claro: raio da borda relativa: 100% nome-da-animação: cssanim-duração da animação: contagem de animação-iteração 2s: infinite} @keyframes cssanim {0% {esquerda: 0px} 100% {left: 100px}}- função de tempo de animação
Esta propriedade determina a curva de velocidade ou o estilo de movimento da animação. Ele é designado para fazer a mudança no estilo de animação suavemente de uma forma para outra. Se nenhum valor for atribuído, o padrão é facilidade.Os valores possíveis para função de tempo de animação são:
facilidade - Este é o valor padrão da propriedade. Aqui, a animação começa lenta, torna-se gradualmente mais rápida no meio e termina lentamente.
linear - A animação mantém a mesma velocidade ao longo do ciclo, ou seja, do início ao fim.
facilidade - A animação começa lentamente.
descontrair - A animação termina lentamente.
facilidade de entrada - A animação se move lentamente durante o início e o fim.
cúbico-bézier (n, n, n, n) - Esse recurso avançado nos permite criar uma função de tempo personalizada, definindo nossos próprios valores. O valor possível varia de 0 a 1.
Sintaxe:
função de tempo de animação: linear | facilidade | alívio | facilidade de entrada | facilidade de entrada |cúbico-bézier (n, n, n, n)
.anim {altura: 200px largura: 200px fundo: azul claro posição: raio da borda relativa: 100% nome da animação: cssanim duração da animação: 2s direção da animação: reverso} @keyframes cssanim {0% {fundo: laranja à esquerda: 0px } 50% {fundo: amarelo esquerdo: 200px superior: 200px} 100% {fundo: azul esquerdo: 100px}}- modo de preenchimento de animação
Esta é uma propriedade especial, pois determina o estilo de animação antes ou depois de a animação ser reproduzida.Como padrão, o estilo do elemento não é afetado pela animação antes do início ou depois de terminar. Esta propriedade é útil porque ajuda a substituir esse comportamento padrão da animação.A seguir estão os valores possíveis para a propriedade animation-fill-mode:
Nenhum - Este é o valor padrão da propriedade, ou seja, os estilos de animação não são aplicados ao elemento, antes ou depois da animação.
para a frente - Os estilos são retidos pelo elemento na sequência final da animação, ou seja, após o término da animação.
para trás - Os estilos são retidos pelo elemento na sequência de animação inicial, ou seja, antes que a animação seja iniciada, especialmente durante o atraso da animação.
ambos - Isso significa que a animação seguirá na direção, ou seja, para frente e para trás
Sintaxe:
modo de preenchimento de animação: nenhum | para a frente | para trás | ambos
.anim {largura: 50px altura: 50px fundo: cor azul claro: branco peso da fonte: posição em negrito: nome-da-animação relativa: cssanim-duração da animação: contagem de animação-iteração 5s: raio da borda infinita: 100%} # anim1 { função de tempo de animação: facilidade} # anim2 {função de tempo de animação: linear} # anim3 {função de tempo de animação: facilidade} # anim4 {função de tempo de animação: saída fácil} # anim5 {animação- função de temporização: facilidade de entrada para saída} @keyframes cssanim {da {esquerda: 0px} para {esquerda: 400px}}- animation-play-state
Esta propriedade especifica que uma animação esteja em reprodução ou em pausa. Além disso, quando uma animação é retomada da pausa, ela começa de onde saiu.Os valores possíveis são:
- jogando - Para renderizar a animação em execução
- pausado - Para renderizar a animação em estado de pausa.
Sintaxe:
animation-play-state: pausado | jogando
.anim {largura: 100px altura: 100px fundo: posição azul claro: nome-da-animação relativa: cssanim duração da animação: 3s animação-atraso: 2s animação-preenchimento-modo: para trás border-radius: 100%} @keyframes cssanim {0% {top: 0px background-color: orange} 50% {top: 0px background-color: green} 100% {top: 100pxbackground-color: blue}}- animação
Isso é conhecido como propriedade abreviada da animação. É usado para código mais limpo. Depois de nos acostumarmos com todas as propriedades da animação, é aconselhável usar a abreviação da animação para codificar mais rapidamente e definir todas as propriedades em uma única linha.
Sintaxe:
animação: [nome-da-animação] | [duração da animação] | [função de tempo de animação] |[atraso de animação] | [contagem de iteração de animação] | [direção da animação] |[animação-preenchimento-modo] | [estado de reprodução de animação]
Todos os efeitos de animação que mostramos acima usando diferentes propriedades de animação podem ser obtidos usando o atalhoanimação propriedade.
.anim {altura: 200px largura: 200px fundo: posição azul claro: raio da borda relativa: 100% nome da animação: cssanim duração da animação: 2s direção da animação: estado de reprodução normal da animação: pausa} @ keyframes cssanim {0% {background: orange top: 0px} 50% {background: yellow left: 200px top: 200px} 100% {background: blue left: 100px}}Isso conclui todas as propriedades de animação que podem ser usadas em CSS. Devemos tentar diferentes variações dessas propriedades para obter uma imagem mais clara. Quando nos sentirmos confortáveis, a propriedade abreviada da animação pode ser de grande ajuda para escrever um código mais limpo e mais rápido. Esta é uma das habilidades importantes a se aprender em CSS para desenvolvedores da web. Como tendemos a nos concentrar mais em objetos em movimento do que em objetos estáticos, as animações podem nos ajudar a conseguir isso e também a desenvolver ótimas páginas da web notáveis.
Confira nosso que vem com treinamento ao vivo conduzido por instrutor e experiência em projetos da vida real. Este treinamento torna você proficiente em habilidades para trabalhar com tecnologias da web de back-end e front-end. Inclui treinamento em Desenvolvimento Web, jQuery, Angular, NodeJS, ExpressJS e MongoDB.
Tem alguma questão para nós? Mencione isso na seção de comentários do blog “Animações em CSS” e entraremos em contato com você.