Computadores e eletrônicos

Como criar um efeito de textos desvanecendo com CSS

Escrito por sara williams | Traduzido por yaakov ben levy
Como criar um efeito de textos desvanecendo com CSS

Personalize sua página da web utilizando CSS

Hemera Technologies/PhotoObjects.net/Getty Images

A criação de keyframes no CSS cria a possibilidade de animação de qualquer parte de sua página da web. Uma vez que são criados os keyframes na planilha de etilos, eles podem ser reutilizados em qualquer elemento da página que você desejar. O efeito desvanecer de textos no CSS requer um código de keyframe que configure a opacidade para que, em um determinado ponto da animação, ele fique opaco, e depois fique com total transparência em um outro ponto da animação.

Nível de Dificuldade:
Moderadamente desafiante

Outras pessoas estão lendo

Instruções

  1. 1

    Abra a planilha de estilos de sua página da web no bloco de notas ou em um editor de códigos. Se sua página não possui uma, crie um arquivo em branco e salve-o como "estilo.css". Acrescente esta linha, após as tags "<title>" em HTML, para acrescentar a planinha: <link rel=”stylesheet” href=”caminho/para/estilo.css” type=”text/css” /> Altere o ”caminho/para/estilo.css" para o caminho que leve a sua planilha de estilos.

  2. 2

    Crie um keyframe de animação, na sua planilha de estilos, usando a seguinte sintaxe: @keyframes fade-text { 0%, 100% { } 50% { } } Acrescente propriedades CSS, tais como "color" (Cor) ou "opacity" (Opacidade) dentro das chaves, próximas as porcentagens. Cada porcentagem dentro do keyframe representa uma posição da animação. Definindo as posições iniciais e finais com os mesmos valores permite com que se tenha um ciclo suave de animação.

  3. 3

    Defina cada keyframe com uma opacidade diferente: @keyframes fade-text { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } Ao definir "opacity" (Opacidade) igual a um no começo e no final da animação, você faz com que ela comece e termine com total opacidade. A opacidade zero, perto da marcação de 50%, faz com que a animação desvaneça pela metade. Se você deseja tornar a animação invisível no final, altere o valor "50%" para "0.5%".

  4. 4

    Crie uma nova regra de estilo para o texto que você deseja criar a animação: #texto_desvanecer { } No exemplo, o "#texto_desvanecer" é um seletor de ID que encontra qualquer tag na página com o ID "texto_desvanecer". Abra sua página da web e olhe em seu código fonte a fim de acrescentar uma ID para as tags que estão em volta de seu texto. Se precisar, acrescente as tags do exemplo: <span id=”texto_desvanecer”>texto a ser animado</span>.

  5. 5

    Chame a animação do keyframe na regra do estilo: #texto_desvanecer { animacao: fade-text 10s infinite; } O primeiro valor é o nome de seu keyframe, seguido pela duração em segundos e o tipo de repetição. Uma repetição infinita cria um ciclo infinito. Substitua o valor "infinite" para um número inteiro, como "10", para especificar um número finito de ciclos.

  6. 6

    Vá e duplique o keyframe em si mesmo, e em qualquer chamada da animação. Você deverá possuir uma cópia do código com o prefixo de "-webkit" e outra cópia com o prefixo de "-moz" para fazer com que o código seja compatível com o Chorme, Safari e Firefox: @-webkit-keyframes fade-text { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @-moz-keyframes fade-text { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } #fading_text { -webkit-animation: fade-text 10s infinite; -moz-animation: fade-text 10s infinite; }

Dicas & Advertências

  • Troque as configurações de opacidade em seus keyframes, para que o primeiro keyframe possua zero de opacidade, enquanto o segundo tenha opacidade total. Isso fará com que o texto "apareça" na página.
  • Em navegadores como o Internet Explorer 9 e anteriores, o texto não irá ser animado. Isso acontece porque tais navegadores não são compatíveis com as animações de keyframe. Entretanto, o texto ainda aparecerá na página.

Mais galerias de fotos

Comentários

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível

Direitos autorais © 1999-2014 Demand Media, Inc.

O uso deste site constitui plena aceitação dos Termos de Uso e Política de privacidade de eHow. Ad Choices pt-BR

Demand Media