Seta Animada Css

Seta animada css.

Neste artigo vamos criar uma seta anima com Html e Css.

Animation e regra keyframe. Saiba como o CSS3 possibilita a criação de efeitos de animações e transições.

Utilizaremos a regra @ keyframes especifica o código de animação. A animação é criada mudando gradualmente de um conjunto de estilos CSS para outro.

Vamos adicionar o Código Html

Nesta seção, projetaremos uma estrutura simples na tag <i>  usando a class=”icon icon-angle-down seta” no html.

<i class="icon icon-angle-down seta"></i>

Vamos adicionar o Css

Nesta seção, usaremos algumas propriedades CSS para projetar o efeito de fadeDown. para obter o efeito de animação infinita da Seta Animada utilizando o @keyframes no css.

.icon.seta {
    
    text-align:center;
    font-size:45px;
    color:#4c4c4c;
    width:50px;
    height:50px;
    background:transparent;
    margin:auto;
    float:none;
    display:block;
    opacity:0;
    animation:anima-seta 700ms ease infinite;

}

@keyframes anima-seta {
    to {
        opacity:1;
        transform: translateY(18px);
    }
}

Nesta seção, combinaremos as duas seções acima para criar Criar a Seta, Utilizando HTML + CSS.

Código Completo Veja o Resultado! 

Baixar Código Veja Funcionando