Dê vida às suas páginas da Web com animações e transições CSS
Os designs de sites estão em constante evolução. Desde design responsivo, tipografia bonita, esquemas de codificação de cores perfeitos, ilustrações, os criadores do site estão apresentando novas ideias e designs todos os dias.
Atualmente, os usuários têm grandes expectativas em relação às interfaces de usuário devido ao conteúdo de alta qualidade disponível na Internet. À medida que as interfaces do site estão evoluindo, a tecnologia por trás delas também está evoluindo. Um dos principais componentes responsáveis por aprimorar a interface do site é o CSS.
CSS ou Cascading Style Sheets são responsáveis por tornar os sites muito interativos, definindo seu estilo, layout e designs. O mais recente padrão para CSS, ou seja, o CSS3 introduziu o conceito de animações e transformações que aprimoram a experiência do usuário adicionando profundidade extra à interface do usuário. Com animações e transições CSS, você pode contar histórias, criar efeitos luxuosos e tornar a interação do usuário com seu site muito eficaz e significativa.
Uma animação é apenas uma simulação de movimento que é criada exibindo uma série de objetos como imagens, um após o outro. A transição, por outro lado, é basicamente um processo no qual um objeto muda de um estado para outro. Mas, quando falamos de animações na web, existem basicamente três tipos – animações CSS ou animações de quadro-chave, transições CSS e animações JavaScript.
Animações CSS
Para criar animações em CSS, precisamos alterar as propriedades CSS de um elemento, como uma imagem ou texto, por um determinado período de tempo. Podemos alterar as propriedades dos elementos quantas vezes quisermos e também definir a duração da animação.
Especificando @keyframes
As animações CSS são definidas bit com quadros-chave. Esses quadros-chave são os pontos intermediários da animação. Todas as animações CSS são especificadas na regra @keyframes. Esses quadros-chave especificam o que acontece com o elemento em um determinado momento, ou seja,
- quais propriedades estão mudando
- quando o elemento é animado
- como o elemento é animado
Você pode definir seu próprio quadro-chave como:
@keyframes animation_name
{
from{ property: value; }
to{ property: value; }
}Aqui ‘para’ e ‘de’ especificam o início e o fim da animação. Também podemos especificar animações para momentos intermediários de tempo entre o início e o fim, assim:
@keyframes name
{
0%{ property: value; }
50%{ property: value; }
100%{ property: value; }
}Aqui 0% representa o início da animação, 100% representa o final da animação e 50% significa a mudança entre o início e o fim. Mas, como dizemos ao navegador por quanto tempo a animação deve ocorrer? Fazemos isso com a ajuda de certas propriedades de animação. Essas propriedades de animação estão associadas ao elemento a ser animado. Por exemplo:
element_name
{
animation_property: value;
style_property: value;
}Aqui, o elemento pode ser qualquer tag HTML como div, span, img, p etc. e style_propertyqualquer propriedade de estilo CSS como background_color, width, height etc.
- @keyframes: Keyframes são usados para especificar o código de animação conforme discutido acima.
- animation-name: O nome especificado com @keyframes é o nome da animação. Este nome é usado para referenciar os quadros-chave com o elemento a ser animado.
- animation-duration: É usado para especificar o tempo de duração da animação em segundos ou milissegundos. Por exemplo, se definirmos para 5 segundos, a animação será executada por apenas 5 segundos. Se não definirmos essa propriedade, a animação não será executada, pois seu valor padrão é 0.
- animation-delay: Podemos atrasar o início da animação especificando o tempo de atraso da animação. Por exemplo, se você deseja iniciar a animação 5 segundos após o carregamento da página no navegador, basta definir o atraso da animação para 5s.
- animation-direction: Podemos dizer ao navegador se uma animação se move na direção reversa ou em ciclos alternados com esta propriedade. Por exemplo, se você deseja que a animação seja executada do início ao fim, defina o valor de animation-duration como ‘normal’. Se você deseja que ele seja executado de ponta a ponta, basta definir o valor como ‘reverso’.
- animation-fill-mode: Podemos especificar o estilo do elemento quando a animação não está sendo reproduzida com este modo, ou seja, quando a animação é atrasada ou finalizada, qual deve ser o estilo do elemento.
- animation-iteration-count: O número de vezes que uma animação pode ser reproduzida é representado por esta propriedade. Por exemplo, se você deseja reproduzir a animação uma vez, defina-a como 1, ou se deseja que a animação seja reproduzida indefinidamente, defina-a como ‘infinito’.
- animation-timing-function: Esta propriedade é usada para especificar a curva de velocidade da animação como linear, aceleração ou desaceleração.
- Animação: É a propriedade abreviada para definir todas as propriedades da animação.
Por exemplo, você pode animar um objeto saltitante com o trecho de código a seguir. Observe como a notação abreviada para animação foi usada aqui.
@keyframes slide {
0% {
left: 0;
top: 0;
}
50% {
left: 244px;
top: 100px;
}
100% {
left: 488px;
top: 0;
}
}
.stage:hover .object {
animation: slide 2s linear; /*shorthand animation property*/
}
.object {
background: #2db34a;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}Transições
As transições CSS são aplicadas às propriedades dos elementos por uma determinada duração de tempo com base em certas funções de temporização, também conhecidas como funções de easing. Por função de temporização, queremos dizer uma função que mudará as propriedades dos elementos de um estado para outro, como progressão linear, aceleração ou desaceleração. Você deve ter notado que uma imagem desliza ou se transforma em outra imagem ao passar o mouse ou um som é reproduzido ao clicar no mouse. Todos esses são efeitos de transição que podem tornar um site interativo.
As funções de easing são importantes para criar transições. Eles especificam como as propriedades serão alteradas. Eles também podem alterar a taxa na qual o valor das propriedades muda do ponto inicial ao ponto final de uma transição. Você pode aplicar transições da seguinte maneira:
element
{
style_property: value;
transition_property: value;
}Aqui o elemento especifica o elemento HTML que você deseja transformar como div, H1, img etc. style_property é o estilo CSS aplicado nesse elemento. Vejamos agora algumas propriedades de transição :
- propriedade de transição: O efeito de transição sempre será aplicado na propriedade CSS de um elemento como sua largura, altura, cor ou forma. O valor desse atributo especifica a propriedade CSS do elemento. O efeito de transição será iniciado sempre que essa propriedade for alterada, por exemplo, ao passar o mouse ou ao clicar.
- função de tempo de transição: Esta é a função de facilidade a ser aplicada ao elemento. Esta propriedade é usada para especificar a curva de velocidade da transição, como facilidade de entrada, facilidade de saída, linear etc.
- transition-duration: É como a propriedade animation-duration. É usado para especificar a duração do efeito de transição em segundos ou milissegundos. Por exemplo, se definirmos para 5 segundos, a transição afetará a conclusão em 5 segundos. Se não definirmos essa propriedade, não haverá transição, pois seu valor padrão é 0.
- transition-delay: Com esta propriedade, podemos especificar a duração do tempo para atrasar o efeito da transição. Por exemplo, se você deseja iniciar o efeito 5 segundos após o mouse passar, basta definir o atraso de transição para 5s.
- transição: É a propriedade abreviada para definir todas as propriedades de transição acima juntas.
Por exemplo, o código a seguir alterará a largura do elemento div ao passar o mouse. Veja a propriedade abreviada de transição aplicada aqui.
div {
width: 50px;
height: 50px;
background: blue;
transition: height 4s; /*transition shorthand on height for 4 seconds*/
}
div:hover {
height: 200px; /* increase height on mouse hover */
}Animações vs. Transições
Semelhanças entre animações e transições
- Tanto a transição quanto a animação são usadas para visualizar mudanças nas propriedades de um elemento.
- Podemos especificar a duração de quanto tempo a transição e a animação devem ocorrer.
- Temos certas funções de temporização para alterar a taxa de ir de um valor para outro para transições, bem como animações.
Diferenças entre animações e transições
- As transições CSS são reativas. Eles precisam ser acionados pelos usuários. As animações, por outro lado, são executadas sempre que a página é carregada no navegador. Eles não precisam ser acionados.
- As transições são executadas uma vez e depois param. Então, temos que acioná-los repetidamente enquanto as animações podem se repetir. Eles podem começar em sua própria parada e começar novamente.
- O próprio navegador cuida das transições. Só precisamos especificar o início e o fim da transição. Podemos definir o efeito de transição, mas não podemos alterar a taxa de mudança de uma transição intermediária. Por exemplo, se uma imagem deslizar ao passar o mouse, veremos apenas o aparecimento ou desaparecimento gradual conforme passamos o mouse sobre ela.
- As animações, por outro lado, fornecem flexibilidade para alterar as propriedades entre o início e o fim. Isso acontece com a ajuda de quadros-chave. Por exemplo, podemos definir a cor de uma imagem como vermelha nos primeiros 5 segundos, azul nos próximos 5 segundos, verde nos próximos 5 segundos e amarela nos últimos 5 segundos da animação. Portanto, temos um controle sobre as animações.
Prefixos do fornecedor
Todos os recursos do CSS3 não são suportados por todos os navegadores. Portanto, usamos prefixos junto com essas propriedades CSS para navegadores específicos, como -webkit- (Safari), -moz- (Firefox) ou -o- (Opera). Isso permite que os marcadores do navegador adicionem um suporte para esse recurso CSS3. Esses prefixos são conhecidos como prefixos do fornecedor ou prefixos do navegador CSS. Portanto, precisamos colocar os prefixos do fornecedor junto com as propriedades de animação e transição. Por exemplo, considere o código abaixo e veja como os prefixos de fornecedores do Safari foram usados:
div {
width: 100px;
height: 100px;
background: red;
/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;
/* Standard syntax */
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}Dica! Você pode evitar essa confusão usando bibliotecas como -prefix-free. É uma biblioteca JavaScript que adicionará o prefixo do navegador atual a qualquer código CSS. Confira muitas dessas bibliotecas disponíveis na web.
Conclusão
Os desenvolvedores de sites podem aplicar animações e transformações para atrair usuários para seus sites. Você pode usá-los para aprimorar formulários, notificações, gráficos de fundo, imagens, gráficos, rabiscos, botões de chamada para ação e outros. Basta usar sua imaginação e você encontrará uma maneira de surpreender seus usuários. Lembre-se de que mesmo uma pequena alteração em seu site pode torná-lo muito melhor e aumentar seu valor. Então, você já usou animações em seu site? Compartilhe suas ideias sobre o uso de animações e transições.