🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

【CSS】Implementação de animações usando elementos span

Embora os elementos span sejam elementos inline, combiná-los com animações CSS permite adicionar efeitos dinâmicos a partes de textos. Este artigo explica como implementar vários efeitos de animação em elementos span usando display: inline-block e @keyframes.

Este texto está animado

Características das animações em span

  • Decoração parcial de texto: Permite aplicar efeitos a palavras específicas dentro de parágrafos
  • Implementação leve: Possível apenas com CSS, sem necessidade de JavaScript
  • Alta versatilidade: Utilizável em vários cenários como botões, rótulos e alertas

🔹 Código básico

<span class="highlight">Texto animado</span>

<style>
.highlight {
  animation: highlight 2s infinite;
  display: inline-block; /* Torna a animação possível */
}

@keyframes highlight {
  0% { background-color: yellow; }
  50% { background-color: orange; transform: scale(1.05); }
  100% { background-color: yellow; }
}
</style>

🧩 Personalização de animações

Modificando as regras @keyframes você pode criar vários efeitos de animação. Embora elementos span normalmente sejam elementos inline, definir display: inline-block permite animar propriedades como largura, altura e margens.

Padrões comuns de animação

/* Animação de rotação - ideal para ícones */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Fade-in - para elementos que deseja destacar */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Bounce - para botões de chamada para ação */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

Pontos de configuração de animações

  • animation-iteration-count: infinite para loops infinitos, ou um número para iterações específicas
  • animation-timing-function: ease, linear, ease-in-out etc. para alterar a qualidade do movimento
  • animation-delay: Atraso no início da animação

🎯 Casos práticos e considerações

Cenários de uso eficaz

1. Ênfase em palavras-chave

Cláusulas importantes em contratos ou valores que usuários devem ler

2. Guias de operação

Indicar campos obrigatórios ou exemplos em formulários

3. Indicadores de status

Expressões como "Novo" ou "Limitado"

Considerações importantes

✗ Uso excessivo de animações

Aplicar animações a muitos elementos simultaneamente pode confundir usuários ou tornar conteúdo importante menos visível.

✓ Considerações de acessibilidade

Para usuários sensíveis a movimento, forneça uma opção para desativar animações usando @media (prefers-reduced-motion: reduce).

✗ Impacto no desempenho

Animar propriedades pesadas como box-shadow ou filter pode causar problemas de desempenho em dispositivos móveis.

💻 Código completo funcional

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de animação span</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      text-align: center;
    }
    .highlight {
      animation: highlight 2s infinite;
      padding: 0.2rem 0.4rem;
      border-radius: 4px;
      display: inline-block;
    }
    @keyframes highlight {
      0% { background-color: #ffeb3b; }
      50% { background-color: #ff9800; transform: scale(1.05); }
      100% { background-color: #ffeb3b; }
    }
  </style>
</head>
<body>
  <p>Este <span class="highlight">texto</span> está animado</p>
</body>
</html>

💯 Código completo funcional (Todas animações + efeitos interativos)

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração completa de animação span</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      line-height: 1.6;
      padding: 20px;
      max-width: 800px;
      margin: 0 auto;
      background: #f5f5f5;
    }
    .demo-section {
      background: white;
      border-radius: 8px;
      padding: 20px;
      margin: 20px 0;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    h2 {
      color: #333;
      border-bottom: 2px solid #eee;
      padding-bottom: 10px;
    }

    /* Animação básica de destaque */
    .highlight {
      animation: highlight 2s infinite;
      padding: 0.2rem 0.4rem;
      border-radius: 4px;
      display: inline-block;
    }
    @keyframes highlight {
      0% { background-color: #ffeb3b; }
      50% { background-color: #ff9800; transform: scale(1.05); }
      100% { background-color: #ffeb3b; }
    }

    /* Animação de rotação */
    .spin {
      animation: spin 3s linear infinite;
      display: inline-block;
      font-weight: bold;
      color: #2196F3;
    }
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* Animação fade-in */
    .fade-in {
      animation: fadeIn 2s ease-in-out infinite alternate;
    }
    @keyframes fadeIn {
      from { opacity: 0.3; }
      to { opacity: 1; }
    }

    /* Animação bounce */
    .bounce {
      animation: bounce 1.5s ease infinite;
      display: inline-block;
      color: #4CAF50;
      font-weight: bold;
    }
    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    /* Animação pulse (exemplo prático) */
    .pulse {
      animation: pulse 1.5s infinite;
      color: #e91e63;
      font-weight: bold;
      padding: 0 5px;
    }
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }

    /* Exibição de alerta */
    .warning {
      animation: warning 1s infinite alternate;
      background: #ff5722;
      color: white;
      padding: 2px 5px;
      border-radius: 3px;
    }
    @keyframes warning {
      from { background: #ff5722; }
      to { background: #ff9800; }
    }

    /* Efeito hover interativo */
    .hover-effect {
      display: inline-block;
      padding: 5px 15px;
      background: #4285f4;
      color: white;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      margin-left: 10px;
    }
    .hover-effect:hover {
      background: #3367d6;
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }
    .hover-effect:hover::after {
      content: "Clique aqui!";
      position: absolute;
      top: -40px;
      left: 50%;
      transform: translateX(-50%);
      background: #333;
      color: white;
      padding: 5px 10px;
      border-radius: 4px;
      font-size: 12px;
      white-space: nowrap;
      animation: fadeIn 0.3s ease-out;
    }
    .hover-effect:active {
      transform: translateY(-1px) scale(0.98);
    }
  </style>
</head>
<body>
  <div class="demo-section">
    <h2>Animação básica de destaque</h2>
    <p>Este <span class="highlight">texto</span> tem animação de mudança de cor e escala</p>
  </div>

  <div class="demo-section">
    <h2>Exemplos de animação personalizada</h2>
    
    <h3>Animação de rotação</h3>
    <p>Ícone <span class="spin">⚙️ Configurações</span> está girando</p>
    
    <h3>Animação fade-in</h3>
    <p>Mensagem <span class="fade-in">importante</span> aparece lentamente</p>
    
    <h3>Animação bounce</h3>
    <p>Por favor <span class="bounce">clique aqui</span>!</p>
  </div>

  <div class="demo-section">
    <h2>Casos de uso práticos</h2>
    
    <h3>Destaque de oferta limitada</h3>
    <p>Use a <span class="pulse">oferta limitada</span> agora!</p>
    
    <h3>Exibição de alerta</h3>
    <p><span class="warning">⚠️ Importante</span>: Hoje é o prazo final!</p>
    
    <h3>Elemento interativo (versão aprimorada)</h3>
    <p>Passe o mouse sobre <span class="hover-effect">👉 aqui</span></p>
    <ul>
      <li>Botão flutua e mostra tooltip ao passar o mouse</li>
      <li>Clique produz efeito de pressionado</li>
      <li>Transições suaves</li>
    </ul>
  </div>
</body>
</html>
Copiado!