O que são transições CSS e como usá-las

Publicados: 2022-02-16

Em um artigo anterior, você aprendeu os conceitos básicos de animações CSS e como usá-los. Poderíamos dizer que as transições são uma forma simplificada de animação com algumas diferenças entre elas, sendo a forma de acionamento da animação a mais relevante.

Outra diferença é que as transições têm apenas dois estados (estado inicial e final), enquanto você pode definir vários estados para um elemento animado com a regra @keyframes . As transições são acionadas em uma ação, por exemplo, ao passar o mouse sobre um elemento, mas as animações podem ocorrer sem uma ação específica, por exemplo, com um atraso de animação após o carregamento da página.

Neste tutorial, vamos aprender os conceitos básicos de transições CSS com um exemplo prático. Além disso, você também aprenderá a usar um sprite de imagem com CSS.

Vamos começar!

Passo 1. - O Layout Proposto

Transições CSS e como usá-las

Temos 4 cartões promovendo os serviços regulares de uma agência web. Ao passar o mouse sobre eles, cada um dos elementos dentro do cartão terá uma transição diferente para obter o efeito desejado.

Passo # 2. - O HTML

  • Abra seu editor de código preferido
  • Crie um arquivo HTML chamado index.html
  • Copie e cole este código:
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>CSS Transitions</title>
 <link href="https://fonts.googleapis.com/css?family=Oswald|Quattrocento&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/style.css">
 </head>
 <body>
 <div class="experts">
 <h2>What We Do</h2>
 <div class="service-card-container">
 <div class="service-card">
 <div class="front">
 <span class="icon-strategy"></span>
 <h3>Strategy</h3>
 </div>
 <div class="hidden">
 <p>The main strategy of a web site is to make visitors convert.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-ui-ux-design"></span>
 <h3>UI / UX Design</h3>
 </div>
 <div class="hidden">
 <p>The design of your site Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, error.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-development"></span>
 <h3>Development</h3>
 </div>
 <div class="hidden">
 <p>Our team of developers Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-digital-marketing"></span>
 <h3>Digital Marketing</h3>
 </div>
 <div class="hidden">
 <p>Marketing experts Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 </div>
 </div>
 </body>
 </html>
ABRIR EM POPUP
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>CSS Transitions</title>
 <link href="https://fonts.googleapis.com/css?family=Oswald|Quattrocento&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/style.css">
 </head>
 <body>
 <div class="experts">
 <h2>What We Do</h2>
 <div class="service-card-container">
 <div class="service-card">
 <div class="front">
 <span class="icon-strategy"></span>
 <h3>Strategy</h3>
 </div>
 <div class="hidden">
 <p>The main strategy of a web site is to make visitors convert.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-ui-ux-design"></span>
 <h3>UI / UX Design</h3>
 </div>
 <div class="hidden">
 <p>The design of your site Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, error.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-development"></span>
 <h3>Development</h3>
 </div>
 <div class="hidden">
 <p>Our team of developers Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-digital-marketing"></span>
 <h3>Digital Marketing</h3>
 </div>
 <div class="hidden">
 <p>Marketing experts Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 </div>
 </div>
 </body>
 </html>

191125 transições css 001

O contêiner de cartão de serviço tem 4 cartões diferentes. Cada cartão é composto por um ícone, um título, algum texto e um link para as informações correspondentes no site. O texto e o link serão mostrados ao passar o mouse sobre o cartão, caso contrário, ficarão ocultos.

Etapa 3. - Os estilos CSS básicos

  • Crie um arquivo CSS e chame-o de style.css — no código HTML já existe um link para este arquivo e para o Google Fonts
  • Copie e cole estes estilos para alterar os estilos de tipografia e a cor de fundo dos cartões:
 /* BASIC RESET */

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 list-style: none;
 text-decoration: none;
 }

 /* TYPOGRAPHY */

 body {
 font-family: 'Quattrocento', serif;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 a {
 font-family: 'Oswald', sans-serif;
 }

 /* BACKGROUND */

 .service-card {
 background-color: #0a1128;
 color: white;
 }

 .service-card a {
 color: white;
 }
ABRIR EM POPUP
 /* BASIC RESET */

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 list-style: none;
 text-decoration: none;
 }

 /* TYPOGRAPHY */

 body {
 font-family: 'Quattrocento', serif;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 a {
 font-family: 'Oswald', sans-serif;
 }

 /* BACKGROUND */

 .service-card {
 background-color: #0a1128;
 color: white;
 }

 .service-card a {
 color: white;
 }

191125 transições css 002

Passo 4. - Os Estilos de Layout

Vamos usar CSS Grid para criar os cartões e organizá-los horizontalmente.

  • Edite o código CSS:
 /* LAYOUT */

 .experts {
 margin-top: 36px;
 }

 .experts h2 {
 text-align: center;
 }

 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 }

O contêiner do cartão de serviço é uma grade horizontal com 4 colunas. Cada cartão foi declarado também como um contêiner de grade com 2 linhas. Observe que declaramos uma altura fixa para cada cartão.

191125 transições CSS 003

Passo #5. - O Sprite da Imagem

De acordo com o W3Schools, um sprite de imagem é uma coleção de imagens colocadas em uma única imagem. Você economiza largura de banda, pois a página não precisará fazer uma solicitação do servidor para cada imagem que carregar. Ele solicitará a imagem uma vez e, em seguida, você mapeará a parte necessária da imagem no código CSS.

191125 transições CSS 004

A imagem tem 240px de largura e 480px de altura. Cada um dos ícones cobre uma área de 120x120px. Para mapear cada uma das imagens, começamos no canto superior esquerdo da imagem com as coordenadas (0px 0px) — seguindo a ordem 'esquerda - topo'.

Dessa forma, as imagens da coluna esquerda do sprite ficam localizadas em:

  • 0px 0px
  • 0px-120px
  • 0px -240px
  • 0px -360px

Estas são as imagens a serem usadas antes de passar o mouse.

As imagens na coluna direita do sprite estão localizadas em:

  • 120px 0px
  • 120px -120px
  • 120px -240px
  • 120px -360px
  • Edite o código CSS:
 .service-card span {
 display: inline-block; /* to be able to apply width and height to the element */
 }

 .icon-strategy {
 background: url(./sprite.png) 0px 0;
 width: 120px;
 height: 120px;
 }

 .icon-ui-ux-design {
 background: url(./sprite.png) 0px -120px;
 width: 120px;
 height: 120px;
 }

 .icon-development {
 background: url(./sprite.png) 0px -240px;
 width: 120px;
 height: 120px;
 }
 .icon-digital-marketing {
   background: url(./sprite.png) 0px -360px;
   width: 120px;
   height: 120px;
 }
ABRIR EM POPUP
 /* LAYOUT */

 .experts {
 margin-top: 36px;
 }

 .experts h2 {
 text-align: center;
 }

 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 }

O contêiner do cartão de serviço é uma grade horizontal com 4 colunas. Cada cartão foi declarado também como um contêiner de grade com 2 linhas. Observe que declaramos uma altura fixa para cada cartão.

191125 transições CSS 003

Passo #5. - O Sprite da Imagem

De acordo com o W3Schools, um sprite de imagem é uma coleção de imagens colocadas em uma única imagem. Você economiza largura de banda, pois a página não precisará fazer uma solicitação do servidor para cada imagem que carregar. Ele solicitará a imagem uma vez e, em seguida, você mapeará a parte necessária da imagem no código CSS.

191125 transições CSS 004

A imagem tem 240px de largura e 480px de altura. Cada um dos ícones cobre uma área de 120x120px. Para mapear cada uma das imagens, começamos no canto superior esquerdo da imagem com as coordenadas (0px 0px) — seguindo a ordem 'esquerda - topo'.

Dessa forma, as imagens da coluna esquerda do sprite ficam localizadas em:

  • 0px 0px
  • 0px-120px
  • 0px -240px
  • 0px -360px

Estas são as imagens a serem usadas antes de passar o mouse.

As imagens na coluna direita do sprite estão localizadas em:

  • 120px 0px
  • 120px -120px
  • 120px -240px
  • 120px -360px
  • Edite o código CSS:
 .service-card span {
 display: inline-block; /* to be able to apply width and height to the element */
 }

 .icon-strategy {
 background: url(./sprite.png) 0px 0;
 width: 120px;
 height: 120px;
 }

 .icon-ui-ux-design {
 background: url(./sprite.png) 0px -120px;
 width: 120px;
 height: 120px;
 }

 .icon-development {
 background: url(./sprite.png) 0px -240px;
 width: 120px;
 height: 120px;
 }
 .icon-digital-marketing {
   background: url(./sprite.png) 0px -360px;
   width: 120px;
   height: 120px;
 }

191125 transições css 005

Nada mal, certo? Vamos adicionar um toque cosmético para terminar esta parte com um pouco de preenchimento.

  • Edite o código CSS:
 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 padding: 0.9em 0 1.8em 0;
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 padding: 0 2.75em;
 }
ABRIR EM POPUP
 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 padding: 0.9em 0 1.8em 0;
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 padding: 0 2.75em;
 }

191125 transições css 006

Passo #6. - As transições CSS

A propriedade de transição CSS tem 4 propriedades filhas diferentes:

  • propriedade de transição (a propriedade do elemento, ao qual a transição será aplicada)
  • duração da transição
  • função de tempo de transição
  • atraso de transição

A abreviação é:

transição: [propriedade da transição] [duração da transição] [função de tempo da transição] [atraso da transição]

  • Edite o código CSS:
 /* TRANSITIONS */

 .service-card {
 transition: margin-top 0.2s ease-out, height 0.2s ease-out, background 0.2s ease-out;
 }

 .service-card:hover {
 margin-top: -5em;
 height: 25em;
 background: #006e9c;
 }


Como você pode notar, é possível aplicar múltiplas transições a diferentes propriedades de elementos, separando-as com uma vírgula. Nenhuma dessas transições tem um atraso.

Para fazer o cartão rolar para cima, você define uma margem negativa na parte superior e adiciona o valor absoluto dessa margem à altura do elemento (320px == 20em).

191125 transições CSS 008

Agora é hora de direcionar as imagens e fazê-las mudar com uma transição.

  • Edite o código CSS:
 .icon-strategy,
 .icon-ui-ux-design,
 .icon-development,
 .icon-digital-marketing {
   transition: background 0.4s step-end;
 }

 .service-card:hover .icon-strategy {
   background: url(./sprite.png) 120px 0;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-ui-ux-design {
   background: url(./sprite.png) 120px -120px;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-development {
   background: url(./sprite.png) 120px -240px;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-digital-marketing {
   background: url(./sprite.png) 120px -360px;
   width: 120px;
   height: 120px;
 }

De novo:

  • propriedade de transição: plano de fundo
  • duração da transição: 0,4s
  • função de tempo de transição: step-end

O resto é apenas mapear para a coordenada exata (detalhada acima) no sprite da imagem.

191125 transições css 009

Finalmente, vamos direcionar o contêiner .hidden .

  • Edite o código CSS:
 .hidden,
 .hidden a {
 transition: color 0.4s ease-out 0.2s;
 }

 .service-card:hover .hidden {
 height: auto;
 }
 .service-card:hover .hidden,
 .service-card:hover .hidden a {
 color: white;
 }

Há dois detalhes aqui a serem observados:

  • A transição na cor do texto tem um atraso de transição de 0,2s
  • A propriedade height do elemento muda ao passar o mouse sem uma transição 
191125 transições css 010

As transições são suportadas por todos os principais navegadores.

191125 transições css 011

Espero que tenham gostado deste exercício. Obrigado por ler!

O código pode ser encontrado aqui.