Dê vida às suas páginas da Web com animações e transições CSS

Publicados: 2017-10-09

Os designs de sites estão evoluindo constantemente. Desde design responsivo, tipografia bonita, esquemas de codificação de cores perfeitos, ilustrações, os criadores de sites estão apresentando novas ideias e designs todos os dias.

Os usuários hoje em dia têm grandes expectativas em relação às interfaces de usuário por causa do 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 evolui. Um dos principais componentes responsáveis ​​por melhorar 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, designs. O padrão mais recente para CSS, ou seja, 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 esplêndidos 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 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 podemos definir a duração da animação.

Especificando @keyframes

As animações CSS são definidas por bits 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 anima
  • como o elemento anima

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 fim da animação e 50% significa a mudança entre o início e o fim. Mas, como informamos 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 elemento pode ser qualquer tag HTML como div, span, img, p etc. e style_property é qualquer propriedade de estilo CSS como background_color, largura, altura etc. Vamos agora ver algumas propriedades de animação em detalhes.

  1. @keyframes : Os quadros-chave são usados ​​para especificar o código de animação conforme discutido acima.
  2. 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.
  3. 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.
  4. 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 como 5s.
  5. animação-direção : Podemos dizer ao navegador se uma animação se move na direção reversa ou alterna ciclos com esta propriedade. Por exemplo, se você quiser que a animação seja executada do início ao fim, defina o valor de duração da animação como 'normal'. Se você quiser que ele seja executado do fim ao início, basta definir o valor como 'reverse'.
  6. 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 está atrasada ou terminada, então qual deve ser o estilo do elemento.
  7. animation-iteration-count : O número de vezes que uma animação pode ser reproduzida é representado por esta propriedade. Por exemplo, se você quiser reproduzir a animação uma vez, defina-a como 1, ou se quiser que a animação seja reproduzida para sempre, apenas defina-a como 'infinito'.
  8. animation-timing-function : Esta propriedade é usada para especificar a curva de velocidade da animação como linear, aceleração ou desaceleração.
  9. Animation : É a propriedade abreviada para definir todas as propriedades da animação.

Por exemplo, você pode animar um objeto saltitante com o seguinte trecho de código. 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 um determinado período de tempo com base em certas funções de tempo, também conhecidas como funções de atenuação. Por função de tempo, 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. Esses são todos os efeitos de transição que podem tornar um site interativo.

As funções de atenuação 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 a esse elemento. Vejamos agora algumas propriedades de transição :

  • transition-property : O efeito de transição sempre será aplicado na propriedade CSS de um elemento como sua largura, altura, cor ou forma. O valor deste atributo especifica essa propriedade CSS do elemento. O efeito de transição começará sempre que esta propriedade mudar, 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 de transição como facilidade de entrada, facilidade de saída, linear etc.
  • transição-duração : É como a propriedade duração da animação. É usado para especificar o tempo de 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.
  • transição-delay : Com esta propriedade, podemos especificar a duração do tempo para atrasar o efeito de transição. Por exemplo, se você quiser iniciar o efeito 5 segundos após o mouse passar, basta definir o atraso da 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

Animations vs. Transitions

Semelhanças entre animações e transições
  • Tanto a transição quanto a animação são usadas para visualizar as 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 tempo para alterar a taxa de passagem de um valor para outro para transições e 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 fazer um loop . Eles podem começar em sua própria parada e depois 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, nós a veremos desaparecer ou desaparecer quando passarmos o mouse sobre ela.
  • As animações, por outro lado, fornecem a flexibilidade de 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 para vermelho nos primeiros 5 segundos, depois como azul nos próximos 5 segundos, depois como verde nos próximos 5 segundos e amarelo nos últimos 5 segundos da animação. Assim, temos um controle sobre as animações.
Prefixos de fornecedor

Todos os recursos CSS3 não são suportados por todos os navegadores. Portanto, usamos prefixos ao longo dessas 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 de fornecedor ou prefixos de navegador CSS . Portanto, precisamos colocar prefixos de fornecedor junto com as propriedades de animação e transição também. Por exemplo, considere o código abaixo e veja como os prefixos de fornecedor 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ê pode encontrar uma maneira de surpreender seus usuários. Lembre-se de que mesmo uma pequena mudança em seu site pode torná-lo muito melhor e aumentar seu valor. E aí, você já usou animações no seu site? Compartilhe seus pensamentos sobre o uso de animações e transições.