0Pricing
Vue Academy · Aula

Transições e animações CSS

Propriedade transition em CSS, animações com keyframes e uso de Animate.css com Vue Transition.

Transições e animações CSS é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Duas formas de animar com CSS

CSS oferece duas ferramentas que combinam perfeitamente com as transições do Vue: a propriedade transition (interpolar entre dois estados) e @keyframes com animation (linhas do tempo com várias etapas). O Vue pode controlar qualquer uma delas.

A abreviação de transition

A abreviação transition combina propriedade, duração, função de temporização e atraso em uma única linha. A ordem é: propriedade, duração, suavização, atraso.

.box {
  /* property duration easing delay */
  transition: transform 0.4s ease-in-out 0s;
}

Transicionando várias propriedades

Separe várias transições com vírgulas. Você pode animar transform e opacity juntos para criar um efeito de deslizamento e fade.

.slide-enter-active,
.slide-leave-active {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}
.slide-enter-from {
  transform: translateX(20px);
  opacity: 0;
}

Quando transition não é suficiente

transition só anima entre dois estados. Para movimentos de quique, pulsação ou com várias etapas, você precisa de @keyframes, que permite definir vários pontos intermediários.

Definindo quadros-chave

@keyframes nomeia uma sequência de estados usando porcentagens (ou from/to). Cada parada descreve os estilos naquele ponto da linha do tempo.

@keyframes bounce-in {
  0% { transform: scale(0); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

A propriedade animation

Aplique um conjunto de quadros-chave com a abreviação animation: nome, duração, função de temporização, atraso, contagem de iterações e direção.

.bounce-enter-active {
  animation: bounce-in 0.5s ease both;
}

Integrando quadros-chave à Transition

Coloque animation na classe enter-active para que seja executada durante a inserção. Para a saída, execute os mesmos quadros-chave ao contrário.

.bounce-leave-active {
  animation: bounce-in 0.5s ease reverse both;
}

Usando Animate.css

Animate.css é uma biblioteca de animações de quadros-chave prontas. Em vez de escrever suas próprias classes, instrua o Vue a usar diretamente as classes do Animate.css por meio das props de classe personalizadas.

<!-- after importing animate.css -->
<!-- classes like animate__fadeIn are predefined -->

enter-active-class e leave-active-class

<Transition> aceita props para substituir os nomes de classe gerados. enter-active-class e leave-active-class permitem conectar qualquer classe externa - perfeito para o Animate.css.

<Transition
  enter-active-class="animate__animated animate__fadeIn"
  leave-active-class="animate__animated animate__fadeOut"
>
  <div v-if="show">Animated by Animate.css</div>
</Transition>

Definindo a duração explicitamente

Quando o tempo do CSS é ambíguo (animação mais transição), defina a prop duration para que o Vue saiba exatamente quando remover as classes. Ela aceita um número ou um objeto com entrada/saída.

<Transition :duration="{ enter: 500, leave: 300 }">
  <div v-if="show">Precise timing</div>
</Transition>

As funções de suavização são importantes

A função de temporização determina como o movimento é percebido. ease-out transmite responsividade na entrada, ease-in na saída, e cubic-bezier() oferece controle total.

.pop-enter-active {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

Verificação rápida

Qual prop permite aplicar uma classe do Animate.css durante a entrada?

Recapitulação

Você comparou a abreviação transition (interpolação de dois estados) com @keyframes e animation (linhas do tempo com várias etapas) e aprendeu a integrar o Animate.css por meio das propriedades enter-active-class e leave-active-class, usando duration para obter uma temporização precisa.

Perguntas Frequentes

A aula “Transições e animações CSS” é grátis?

Sim — o texto completo de “Transições e animações CSS” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Transições e animações CSS”?

Propriedade transition em CSS, animações com keyframes e uso de Animate.css com Vue Transition. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Transições e animações CSS”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. O componente Transition
  2. Transições e animações CSS
  3. Hooks de transição em JavaScript
  4. TransitionGroup para animações de listas
← Voltar para Vue Academy