As animações em uma página da web podem atrair mais usuários. Pergunte a si mesmo - se você visse uma página da web com bastante animação, não gostaria de explorar mais? Agora, com as transições CSS, você pode dar vida ao seu trabalho com ótimas animações. E, veja bem, isso precisa ser feito da maneira certa. Vamos explorar o mundo das transições CSS na seguinte ordem:
- Por que transições CSS?
- A propriedade de transição
- O que você precisa especificar?
- A propriedade da função Transition-timing-function
- A propriedade de atraso de transição
Por que transições CSS?
Vamos dar um exemplo. Se você mudar a cor de um elemento de branco para azul, essa mudança será quase instantânea. Para um efeito mais animado, você pode fazer essa mudança acontecer gradualmente. Isso também parece visualmente atraente. Ao habilitar as transições CSS, você pode personalizar a forma como as alterações ocorrem. Você pode definir como as mudanças nos elementos ocorrem em intervalos de tempo específicos que seguem uma curva de aceleração.
As transições CSS permitem definir as mudanças para elementos, os intervalos de tempo específicos, a velocidade da curva de aceleração e muito mais. Você pode fazer tudo isso sem usar Flash ou JavaScript .
Para um melhor entendimento, você pode consultar a imagem abaixo:
Na imagem acima, o elemento HTML mudará de vermelho para azul em questão de um segundo. Você também verá a cor intermediária quando a transição estiver ocorrendo. Se não for usar transições CSS, você notará que a mudança na cor do vermelho para o azul é instantânea - você não verá a cor intermediária. Com as transições CSS, você notará um efeito animado quando os elementos HTML mudarem do estado antigo para o novo.
A propriedade de transição
Você pode usar a propriedade de transição abreviada para controlar as transições CSS. O uso dessa abreviatura não é apenas fácil, mas também pode evitar parâmetros fora de sincronia, que podem ser bastante frustrantes para depurar em CSS.
A propriedade de transição especifica as propriedades CSS para as quais você deseja o efeito de transição. Apenas essas propriedades CSS são animadas.
Sintaxe:
transição:
Como um iniciante, você pode encontrar algumas dificuldades em usar a abreviação. Se você acha que usar a abreviação é um pouco complexo para você agora, pode especificar as propriedades de transição separadamente. Para um elemento HTML, você pode especificar as propriedades de transição uma por uma, conforme mostrado no exemplo abaixo:
exemplo java de invocação de método remoto
div {largura: 100px altura: 100px fundo: azul-claro transição-propriedade: largura transição-duração: 2s transição-tempo-função: linear transição-atraso: 1s} div: hover {largura: 300px}Passe o mouse sobre a caixa
No exemplo acima, especificamos as propriedades (propriedade de transição, duração da transição, função de tempo de transição e atraso de transição) e seus valores separadamente. Aprenderemos sobre essas propriedades de transição em breve.
O que você precisa especificar?
Existem basicamente duas coisas que você precisa especificar para criar transições CSS: a propriedade CSS à qual deseja adicionar um efeito e o tempo de duração desse efeito.Você precisa manter uma coisa em mente - quando você não especifica a duração do tempo, a transição terá um valor padrão de 0 , e não haverá nenhum efeito.
Vejamos um exemplo:
O código a seguir define um efeito de transição da propriedade de largura por uma duração de cinco segundos.
div {largura: 100px altura: 100px fundo: transição azul: largura 5s} div: hover {largura: 600px}Mova o cursor sobre o elemento div acima para ver o efeito de transição.
No código acima, você verá que quando você passa o cursor sobre a caixa azul, a caixa azul aumenta sua largura gradualmente por um período de cinco segundos. Você também notará que, ao remover o cursor da caixa azul, a caixa azul retornará ao tamanho original gradualmente (não instantaneamente). Você também pode alterar os valores de largura e duração de tempo para ver como essa propriedade de transição afeta o elemento HTML.
Você também pode adicionar o efeito de transição a mais de uma propriedade. Você pode fazer isso usando vírgulas para separar as propriedades. Vejamos um exemplo:
No código a seguir, a propriedade de transição é especificada para largura, altura e transformação.
div {padding: 15px width: 150px height: 100px background: green transição: width 2s, height 2s, transform 2s} div: hover {width: 300px height: 200px transform: rotate (360deg)} Olá Mundo (Passe o mouse sobre mim)
Com o exemplo acima, você verá como a caixa verde se move quando você passa o mouse sobre ela.
como criar um array dinâmico em java
Especificamos apenas a propriedade e a duração do tempo. Vamos ver os outros parâmetros com vários exemplos.
A propriedade da função Transition-timing-function
Esta propriedade define a curva de velocidade para o efeito de transição. Pode assumir os seguintes valores:
- Valor de facilidade: Este é o valor padrão onde o efeito é lento no início, depois mais rápido e termina lentamente.
- Valor Linear: Este efeito não varia a velocidade da transição - ele mantém a velocidade consistente do início ao fim.
- Valor facilitado: Este efeito começa lentamente.
- Valor de facilidade de saída: Esse efeito tem um fim lento.
- Valor Ease-in-out: Este efeito tem um início lento e um final lento.
- Valor cúbico-bezier (n, n, n, n): Você pode especificar seu próprio conjunto de valores na função cubic-bezier.
O código abaixo mostra os efeitos de transição para valores lineares, atenuação, atenuação, atenuação e atenuação.
div {largura: 100px altura: 100px fundo: rosa transição: largura 2s} # div1 {função de tempo de transição: linear} # div2 {função de tempo de transição: facilidade} # div3 {função de tempo de transição: facilidade } # div4 {função de tempo de transição: facilidade de saída} # div5 {função de tempo de transição: facilidade de entrada} div: hover {largura: 300px}Passe o mouse sobre os elementos div abaixo
linear
facilidade
facilidade
descontrair
facilidade de entrada
A propriedade de atraso de transição
Às vezes, você deseja que uma animação ocorra após um determinado período de tempo. A propriedade de atraso de transição permite especificar o atraso de um efeito de transição. Você pode especificar o atraso em segundos.
Vejamos um exemplo para ver o atraso no efeito de transição:
div {largura: 100px altura: 100px fundo: amarelo transição: largura 3s transição-atraso: 1s} div: hover {largura: 300px}Passe o mouse sobre o elemento div abaixo
Nota: Você pode observar que 1 segundo de atraso antes do início do efeito
No código acima, ao passar o mouse sobre a caixa amarela com o cursor, você perceberá (por um segundo) que não há efeito. Após uma espera de um segundo, você notará o efeito.
Com isso, chegamos ao fim deste artigo sobre Transições CSS. Você pode adicionar animações às suas páginas da web agora. Experimente estes exemplos.
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 “Transição CSS” e entraremos em contato com você.