Texto em Movimento Css

Texto em movimento css

Neste artigo veremos como criar animações com CSS utilizando para isso o recurso de animation com keyframes. Com eles podemos criar telas de carregamento, botões e banners e textos animados.

Vamos Adicionar o Html

 Nesta seção, a estrutura básica do código é projetada usando HTML. 

A animação de texto é criada alterando a cor do texto usando algumas propriedades CSS.

  <header class="box-texto">
                
      <h1 class="title">Loop Nerd</h1>
      <span class="descricao">FRONT-END</span>

  </header>

Vamos Adicionar o Css: 

Nesta seção, as propriedades CSS são usadas para criar Animação de Texto.

@keyframes são usados ​​que definem o código para animação. A animação é criada mudando gradualmente de um conjunto de estilos CSS para outro.

.box-texto{

    text-align:center;
    position: absolute;
    top:0;
    left:0;
    transform: translate(-50%, -50%);
    width: 100%;
    display: contents;
    background: red;

}

.cabecalho { width:100%; float:left; }

.box-texto span{ display:block; }

.title{
    
    font-size: 70px;
    font-weight: 700;
    color: #22cad0;
    font-family: 'open_sansregular';
    letter-spacing: 5px;
    margin-bottom: 20px;
    background:#fff;
    position: relative;
    animation: motion 3s 1;
}

.descricao{

    font-size:1.5em;
    color: #868686;
    font-family: 'open_sansregular';
    letter-spacing: 26px;
    transition:6s;

}

@keyframes motion{
    0%{
        color: #000000;
        margin-bottom: -42px;
    }
    30%{
        letter-spacing: 30px;
        margin-bottom: -42px;
        }
    85%{
        letter-spacing: 5px;
        margin-bottom: -42px;
    }
}

Código Completo: 

É a combinação das duas seções de código acima. 

Veja o Resultado do Texto em movimento css!

Baixar Código Veja Funcionando